JSFiddle - React, Tailwind, and code Playground

by Logan Gants

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row carousel-container">
    <div class="carousel-image-container">
      <img class="carousel-image img-responsive" src="https://lorempixel.com/900/500?r=4">
    </div>
    <div class="carousel-list-container">
      <ul class="list-group">

        <div class="list-group">
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">List group item heading</h5>
              <small>3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small>Donec id elit non mi porta.</small>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">List group item heading</h5>
              <small class="text-muted">3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small class="text-muted">Donec id elit non mi porta.</small>
          </a>
          <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">List group item heading</h5>
              <small class="text-muted">3 days ago</small>
            </div>
            <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small class="text-muted">Donec id elit non mi porta.</small>
         ...

CSS

.carousel {
  max-height: 500px;
  position: relative;
  display: inline-block;
  height: 100%;
}

.carousel-image-container {
  width: 60%;
}

.carousel-image {
  max-width:100%;
  max-height:100%;
  object-fit: contain;
}

.carousel-list-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: hidden;
  width: 40%;
}