Как поставить блок напротив других?

Question

[Alexandriski]

Как передвинуть блок, чтобы результат получился, как на картинке?

<div class="left-blocks"> 
            
            <article class="firs-b"> 
                <h3>Мальдивские острова
                </h3>
                <span>от 55 000 р
                </span>
                <a class="btn-more" href="">Подробнее
                </a>
            </article>

            <article class="second-b">
                <h3>Горящий тур на остров крит
                </h3>
                <span>от 30 000 р
                </span>
                <a class="btn-more" href="">Подробнее
                </a>
            </article>

            </div>

            <div class="right-block">

                <article class="three-b">
                <h3>
                    Номера люкс
                </h3>
                <span>от 5 000 р
                </span>
                <a class="btn-more" href="">Подробнее
                </a>      
            </article>   
                  
            </div>

.left-blocks {
    
}

.firs-b { 
    width: 573px;
    height: 258px;
    left: 0px;
    top: 0px;
    outline: 3px solid rgb(246, 0, 0);
}

.second-b {
    width: 573px;
    height: 258px;
    left: 0px;
    top: 0px;
    outline: 3px solid rgb(246, 0, 0);
}

.three-b {
   
    width: 573px;
    height: 540px;
    left: 971px;
    top: 314px;
    outline: 3px solid rgb(246, 0, 0);
}

.right-block {
   
}

Comments

[Ankhena]

Флексами такая раскладка может получиться только при заданной высоте родителя или дополнительных обертках.
Так что, ваш вариант это гриды. В два столбца.

Answer 1

[Edward Gricc]

Вы можете использовать Grid или FlexBox, почитайте об этих технологиях и примите решение что для вас предпочтительнее, от себя могу посоветовать пройти мини игру для понимания работы FlexBox flexboxfroggy.com/#ru

Comments

[Сергей Т]

Да, flexboxfroggy классная игра, в свое время помогла мне быстро освоить флексы)
 также классная игра по гридам есть cssgridgarden.com

Answer 2

[wadowad]

Кроме флексов и гридов можно по старинке - у контейнера с левыми блоками задать float: left.

Answer 3

[Сергей Т]

оберни все в общий контейнер, и сделай контейнеру display: flex
или

display: grid;
grid-templates-columns: 1fr 1fr;

размеры колонок делаешь какие необходимо

Comments

[Ankhena]

Флексами такая раскладка может получиться только при заданной высоте родителя или дополнительных обертках.