div с изображением слева и заголовком и текстом справа

Question

Мне нужно создать div точно так же, как на картинке. Левая сторона должна быть заполнена image, а правая - заголовком и описанием ниже. Примите во внимание, что это что-то вроде левой стороны col-5, а правой стороны col-7 или подобное, и изображение, независимо от того, каков исходный размер, должно помещаться внутри, и описание может быть очень длинным. Так что div должно быть расширяемым по вертикали. Также возможно реализовать кнопку "read more" и показывать только сначала 300 chars, если описание длинное, а при нажатии кнопки развернуть остальные?

Answer 1

Относительно просто добиться использования flexbox :

.section {
  border: 1px solid #ccc;
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
}

.paragraph {
  color: #555;
  display: flex;
  flex-direction: column;
}

.content {
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #222;
  line-height: 24px;
}

<section class="section">
  <img src="https://placehold.it/150x150" class="image" />
  <div class="content">

    <h2 class="title">
      This is a title
    </h2>
    <p class="paragraph">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. At non ex earum, libero dignissimos voluptates. Quis beatae dolorem autem ipsa!
    </p>
  </div>
</section>