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">

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

CSS

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

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

.flex_el {
    flex: 1 1 auto;
}

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

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

[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;
}

/*-- Media Queries --*/

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