JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row equal-height"> <!-- START BS ROW -->
    <div class="col-md-1"> <!-- START BS COL-MD-1 -->
    </div> <!-- END BS COL-MD-1 -->
    <div class="col-md-3 zeropadding-right"> <!-- START BS COL-MD-4 -->
        <div class="singlepage-list-style"> <!-- START SINGLEPAGE-LIST-STYLE -->
            <div class="list-header"> <!-- START LISTE-HEADER -->
                <h1>Quick info</h1>
            </div> <!-- END LIST-HEADER -->
            <div class="the-list"> <!-- START THE-LISTE -->
            <ul>
                <li class="check">blah<sup>2</sup></li>
                <li class="check">blah</li>
                <li class="check">blah</li>
                <br>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="non-check">blah</li>
                <li class="non-check">blah</li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="non-check">blah</li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="non-check">blah</li>
                <li class="non-check">blah</li>
                <li class="check">blah <p><i class="fa fa-check"></i></p></li>
                <li class="non-check">blah</li>
            </ul>
            </div> <!-- END THE-LIST -->
        </div>
    </div> <!-- END BS COLD-MD-4 -->
    <div class="col-md-7 zeropadding-left"> <!-- START BS COL-MD-6 -->
        <div...

CSS

.equal-height, .equal-height > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 0 auto;
  }

.zeropadding-right {
    padding-right:0px;
}

/***** SINGLEHEADER CONTENT AREA STYLING *****/

.singleheader-content-style {
    background-color:#fff;
    border-right: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
}

.singleheader-content-style h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

/***** SINGLEHEADER LIST AREA STYLING *****/

.singlepage-list-style {
    background-color:#fff;
    border-left: 1px solid #9c9c9c;
    padding:20px;
    font-family: 'Open Sans', sans-serif;
    width:100%;
    font-size:16px;
}

.singlepage-list-style ul li {
    list-style-type:none;
}

.singlepage-list-style ul {
    padding-left:20px;
}

.check p {
    color:#44a331;
    display:inline;
}

.non-check {
    opacity:0.5;
}

.the-list {
    border-right: 1px solid #9c9c9c;
    width:100%;
}

.list-header {
    width:100%;
}

.list-header h1,h2,h3,h4,h5,h6 {
    margin-top:0px; /* Change boostraps default */
    color:#de1b1b;
}

/***** START MAPS STYLING *****/

.maps-style img{
    width:100%;
    border-top:1px solid #9c9c9c;
    border-bottom:1px solid #9c9c9c;
    font-family: 'Open Sans', sans-serif;
}

.maps-style {
    background:#fff;
    border-right:1px solid #9c9c9c;
    border-left:1px solid #9c9c9c;
    flex-grow: 1;
}

.maps-style h1 {
    margin-top:0px; /* Change Boostraps default */
    margin-left:20px;
    color:#de1b1b;
}