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

  <!-- FIIN -->
  <div class="row row_flex">

    <div class="col-sm-12 col-md-6 col-lg-6 flx mast_wrap">
      <div class="panel_wrap nill flx">
      <div class="row nill">
      <div class="col-sm-12 col-md-12 col-lg-6">
        <a title="Yosh - GVM" class="fancybox zero" rel="gallery1" href="http://galnova.com/A20/profile/GVM-yosh.png">
        <img class="nill" alt="Yosh - GVM" src="http://galnova.com/A20/profile/GVM-yosh.png">
        </a>
       </div>
            
       <div class="col-sm-12 col-md-12 col-lg-6 small_nill">
         <div class="hd">Yosh Baskerville</div>
              <p class="">"Robe Knight and Guardian"</p>
              <ul class="flex_el">
              <li>House: Robe</li>
              <li>Job: Robe Knight</li>
              <li>Style: Slicer</li>
              <li>Weapon: Sword(Rhetoric)</li>
              <li>Special: The Answer</li>
              <li>Personality: Causious</li>  
              </ul>
          </div>
        </div>
            <a class="lit"><button type="button" class="col-sm-12 col-lg-8 offset-lg-2 btn btn-outline-primary btn-lg">Primary</button></a>
      </div>
    </div>
    
    <div class="col-sm-12 col-md-6 col-lg-6 flx mast_wrap">
      <div class="panel_wrap nill flx">
      <div class="row nill">
      <div class="col-sm-12 col-md-12 col-lg-6">
        <a title="Samson - GVM" class="fancybox zero" rel="gallery1" href="http://galnova.com/A20/profile/GVM-samson.png">
    ...

CSS

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

.fancybox {
    background: rgb(202,202,224);
background: linear-gradient(0deg, rgba(202,202,224,1) 0%, rgba(192,214,215,1) 35%, rgba(185,236,255,1) 100%);

    float: left;
}

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

.row.nill {
  background: none;
  margin: 0;
  border: none;
  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;
}

ul {
  padding-left: 0;
  margin-bottom: 0px;
  list-style: none;
}

li {
  padding-left: 10px;
}

li::before {
  content: "•";
  color: #6c757d;
  font-size: 20px;Z
}

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

.mast_wrap:nth-child(odd) [class*="col-"] img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

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

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

[class*="col-"] .panel_wrap.nill a.lit {
  margin: 0 0 10px 10px;
}

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

[class*="col-"] .panel_wrap img.nill {
    padding-top: 0;
    margin-bottom: 0;
}

[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;
  font-weight: bold;
  margin-bottom: 5px;
}

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

/*-- Media Queries --*/

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

@media (max-width:...