JSFiddle - React, Tailwind, and code Playground

by Logan Gants

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="row row-eq-height">
  <div class="col">
    <img src="http://lorempixel.com/output/sports-q-c-800-600-2.jpg">
  </div>
  <div class="col">
    <div class="card">
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
      </ul>
    </div>
  </div>
</div>

CSS

img {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.list-group {
  overflow-y: scroll;
}