Content-image co-space

Best fit for content and image in shared space

HTML

<div class="timeline-item">
  <div class="timeline-leftbox">
    <div>
      <h3 class="timeline-title">Blah blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae pos
      </p>
    </div>
  </div>
  <div class="timeline-rightbox">
    <img src="http://via.placeholder.com/550x900" />
  </div>
</div>

CSS

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.timeline-item{
  width: 100%;
  position:relative;
}
.timeline-leftbox{
  width:50%;
  text-align:right;
  padding:0 8px;
}

.timeline-rightbox{
  position:absolute;
  height:100%;
  width:50%;
  top:0;
  right:0;
  overflow:hidden;
  white-space:nowrap;
}
.timeline-rightbox::after{
  content:"";
  display:inline-block;
  height:100%;
  width:0;
  vertical-align:middle;
}
.timeline-rightbox img{
  max-height:100%;
  max-width:100%;
  width:auto;
  height:auto;
  vertical-align:middle;
}