Как разобраться в позиционирование в блоках?

Question

[vadin322]

Подскажите как изменить код чтобы заглавие "Lorem ipsum — классическая панграмма" правее даты, но не ниже , как на макете и как построить модель всего блока

Comments

[Ankhena]

Судя по скринам, вы читаете учебник по флексам.
Вот флекс и задайте.
https://jsfiddle.net/kc65g8qz/

Общая структура:
Заголовок, список из 4 элементов, в каждом из которых есть дата и описание. Описание в свою очередь состоит из заголовка и списка.

Кружочки - это фоны.

[Froggyweb]

я бы подумал о другом....
Очень много ошибок в html, например br лишний абсолютно,
название курса это - заголовок, а не див вложенный в дату. несмотря на подчеркивания - это не БЭМ от слова вообще
Картинки в вопросе тоже говорят сами за себя... кадрирование абы как... лишняя информация и пустого места....

[vadin322]

Froggyweb, это 1 сайт ,что пытаюсь сверстать .По этому и спрашиваю )

[FrelFrloich]

vadin322, что бы вы поняли.

Вот по факту на какую структуру вы смотрите, кружочки и тд это фоточки или псевдоэлементы с цветом.

.main {
display: flex:
flex-direction: column;
width: 100%;
}
.container {
display: flex:
flex-wrap: wrap;
width: 100%;
}

.box {
display: flex:
width: 50%;
}

<div class="main">
    <h1>Программа курса</h1>

    <div class="container">
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
        <div class="box">
            <div>Тут дата</div>
            <ul>Тут список</ul>
        </div>
    </div>
</div>

[vadin322]

FrelFrloich, cпасибо огромное

Answer 1

[Антон Романков]

Пример на флексах: https://codepen.io/romant094/pen/VwzgBYv