JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <!-- 1 -->
  <div class="row row_flex">
    <div class="col-md flx">
      <div class="panel_wrap flx">
            <div class="hd">1 of 1</div>
            <p class="flex_el">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
            <a><button type="button" class="col-sm-12 col-lg-4 offset-lg-4 btn btn-outline-primary btn-lg">Primary</button></a>
      </div>
    </div>
  </div>
  <!-- 1 -->
  
  <!-- 2 -->
  <div class="row row_flex">
    <div class="col-md flx">
      <div class="panel_wrap flx">
            <div class="hd">1 of 2</div>
                        <p class="flex_el">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
            </p>
             <a><button type="button" class="col-sm-12 col-lg-6 offset-lg-3 btn btn-outline-primary btn-lg mt-auto">Primary</button></a>
      </div>
    </div>
    <div class="col-sm flx">
      <div class="panel_wrap flx">
            <div class="hd">2 of 2</div>
                        <p class="flex_el">
            Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et...

CSS

.container {
  margin-bottom: 40px;
  }
  
.row {
  background: #f8f9fa;
  margin-top: 20px;
  border: solid 1px #dddddd;
  padding: 10px;
}

.row.sub {
  background: #dff0f1;
  margin-bottom: 10px;
  border: solid 1px #dddddd;
  padding: 0;
}

.row_flex {
    display: flex;
}

.row.sub [class*="col-"] {
  margin: 0;
}

.flx {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex_el {
    flex: 1 1 auto;
}

[class*="col-"] {
  padding: 10px;
}

[class*="col-"] .panel_wrap {
  overflow: hidden;
  border: solid 1px #6c757d;
  padding: 10px;
  padding-top: 0;
  background: #fff;
}

[class*="col-"] .panel_wrap img {
    width: 100%;
    padding-top: 10px;
    margin-bottom: 10px;
}

[class*="col-"] .panel_wrap img.fixx {
    width: 33%;
    padding-top: 10px;
    margin-bottom: 10px;
}

[class*="col-"] .panel_wrap .hd {
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background: #eeefff;
  margin-top: 0px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
}

[class*="col-"] .panel_wrap p {
  padding: 10px 0 0 0;
}

[class*="col-"] .panel_wrap p.alter {
  padding: 0;
}

/* .fixx {
  width: 124px;
  height: 124px;
} */

/*-- Media Queries --*/

@media (max-width: 992px) {
  .bttn_wrapper .btn:last-child { margin-top: 10px; }
}