Как сделать расположение элементов, как на схеме?

Question

Делаю адаптив под разные расширения. Как сделать выравнивание блоков так, как на картинке снизу? Слева Картинка, справа два текстовых блока - заголовок и описание. Описание (то что желтым) должно уйти вниз и занять 100% ширины контейнера на мобилке, но на пк должно быть под Заголовком (то зеленным). Не пойму как это реализовать нормально. Пытался флексами, но идеального результата не достиг. Получилось так провернуть через position:absolute, но это не вариант т.к. не расстягивает контейнер снизу. JS использовать для такой мелочи тоже не вариант.

Изначально попробовал объединить текстовые блоки в один.

.img{
height:50px;
width:100px;
background:lightblue;
display:flex;
align-items:center;
justify-content:center;
}
.container{
width:500px;
display:flex;
justify-content:space-between;
}
h2{
margin:0;
}
.text{
width:300px;
}

<div class="container">
    <div class="img">Изображение</div>
  <div class="text">
    <h2>
      Имплант Straumann
    </h2>
    <p>
      Титановый имплант премиум-качества, выполняющий роль корня зуба. Приживаемость 99,8%.
    </p>
  </div>
</div>

Но на мобилке уже понял, что так не покатит т.к. нельзя вытянуть flex элемент внутри flex-элемента, попробовал через position:absolute, но этот вариант не очень т.к. снизу будет еще одна секция, и описание будет на неё наезжать, если не задать подходящую высоту для container.

.img{
height:50px;
width:100px;
background:lightblue;
display:flex;
align-items:center;
justify-content:center;
}
.container{
width:500px;
height:100px;
display:flex;
justify-content:space-between;
position:relative;
}
h2{
margin:0;
}
.text{
width:300px;
}
p{
position:absolute;
left:0;
bottom:0;
margin:0;
}

<div class="container">
    <div class="img">Изображение</div>
  <div class="text">
    <h2>
      Имплант Straumann
    </h2>
    <p>
      Титановый имплант премиум-качества, выполняющий роль корня зуба. Приживаемость 99,8%.
    </p>
  </div>
</div>

Попробовал разделить по отдельности каждый flex элемент и вроде всё как выглядит отлично на мобильной версии, то на пк версии не получится прибить описание к заголовку.

.img{
height:50px;
width:100px;
background:lightblue;
display:flex;
align-items:center;
justify-content:center;
}
.container{
width:400px;
display:flex;
justify-content:space-between;
flex-flow:wrap;
}
h2{
margin:0;
}
.container p{
width:100%;
}

<div class="container">
    <div class="img">Изображение</div>
    <h2>
      Имплант Straumann
    </h2>
    <p>
      Титановый имплант премиум-качества, выполняющий роль корня зуба. Приживаемость 99,8%.
    </p>
</div>

По итогу на пк смотрится так, но это не то, что нужно.

.img{
height:50px;
width:100px;
background:lightblue;
display:flex;
align-items:center;
justify-content:center;
}
.container{
width:400px;
display:flex;
flex-flow:wrap;
justify-content:space-between;
}
h2{
margin:0;
width:70%;
}
.container p{
width:70%;
align-self:right;
margin:0 0 0 auto;
}

<div class="container">
    <div class="img">Изображение</div>
    <h2>
      Имплант Straumann
    </h2>
    <p>
      Титановый имплант премиум-качества, выполняющий роль корня зуба. Приживаемость 99,8%.
    </p>
</div>

Так получилось сделать через float, но текст уже наезжает на картинку.

БЛОГ НА HUSL

Как сделать расположение элементов, как на схеме?

Ответы (0 шт):