div with image on left and title and text on right

Question

I need to create div exactly same as on picture. Left side should be populated with image and right with title and description bellow. Take into account that it is something like left side is col-5 and right side is col-7 or similar, and image no matter what the original size is, it should fit inside, and description can be very long. So div should be expandable vertically. Also is it possible to implement "read more" button and show only first 300 chars if description is long, and on button click, expand the rest?

And what have you tried so far? – Carol Skelly Mar 27 '19 at 18:08 — Carol Skelly, Mar 27 '19 at 18:08

score 1 · Answer 1 · answered Mar 27 '19 at 18:08

It's relatively simple to achieve using 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>

div with image on left and title and text on right

1 Answers1