JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="link-scroll-list mb-25">
                        <div class="link-scroll-list__heading">
                            This is a list...
                        </div>
                        <div class="link-scroll-list__list-wrapper">
                            <div class="link-scroll-list__list-section">
                                <div class="link-scroll-list__list-section-heading-wrapper">
                                    <span class="link-scroll-list__list-section-heading">A</span>
                                </div>
                                <ul class="link-list">
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Apple</a>
                                    </li>
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Artichoke</a>
                                    </li>
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Asparagus</a>
                                    </li>
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Anchovi</a>
                                    </li>
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Avocado</a>
                                    </li>
                                    <li class="link-list__item">
                                        <a class="link-list__link" href="#">Apricot</a>
                                 ...

CSS

.row {
    display: flex;
}

.col-sm-6 {
    display: flex;
    flex-direction: column;
    border: 2px dashed red;
}

.mb-25 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.link-scroll-list__heading {
  font-size: 2rem;
  padding-bottom: 25px;
}
.link-scroll-list__list-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  height: 400px;
  -moz-transition: height ease 0.5s;
  -o-transition: height ease 0.5s;
  -webkit-transition: height ease 0.5s;
  transition: height ease 0.5s;
}
.link-scroll-list__list-section-heading-wrapper {
  background-color: #fff;
  margin-right: 15px;
}
.link-scroll-list__list-section-heading {
  font-size: 1.5rem;
  font-weight: bold;
  display: inline-block;
  background-color: #ffd100;
  padding: 10px 15px;
}
.link-list {
  padding-right: 15px;
}
.link-list__item {
  border-bottom: 1px solid #DCDADA;
}
.link-list__item:last-child {
  border: 0;
}
.link-list__link {
  font-weight: bold;
  padding: 15px 0;
  display: block;
}
.image-cta--connected .image-cta__connector {
  display: block;
}
.image-cta__cta-wrapper {
  padding: 20px 20px 20px 20px;
  background-color: #f5f5f5;
  position: relative;
}
.image-cta__connector {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  border-width: 0 25px 30px 25px;
  border-color: transparent transparent #f5f5f5 transparent;
  top: -30px;
  left: 50px;
  display: none;
}
.image-cta__heading {
  font-size: 2rem;
  line-height: 1.2;
}
.pb-20{
  padding-bottom:20px!important;
}
.mb-25{
  margin-bottom:25px!important;
}