JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<div id="container">
  
<!-- START ITEM-->
<h1>Short description</h1>
<div class="floatcontent clearfix">
    
    
    <div class="right">
    <div class="right-forIE">
      <a class="btn" href="#">Click Me</a>
    </div>
  </div>   
    
    
  <div class="left">
    <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...""There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."Neque</p>
    
  </div>
  <div class="right">
    <div class="right-forIE">
      <a class="btn" href="#">Click Me</a>
    </div>
  </div>   
</div>
<!-- END ITEM-->
  
</div>

CSS

/* CLEARFIX */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

#container {
margin: 10px 0px 0; padding: 10px;
width: 600px;
background: #F7F7F9;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
display: inline;
float: left;
}
.floatcontent {
position: relative;
clear: both;
margin: 10px 0 0; padding: 0px;
width: 598px; /*take width of couponlist and subtract by 2px*/ height: 100%;
border: 1px solid #E0E1E6;
background: #F2F2F2;
}
.left {
display:table-cell; zoom: 1; *display:inline; *vertical-align: top;
width: 400px;
border-right: 1px solid #DEE2E5;
background: #FFF;
    
}
p {
margin: 0px; padding: 5px 10px;
font-size: 12px; line-height: 18px;
color: #7B8CA1;
}
.right {
display:table-cell; zoom: 1; *display:inline; *position: absolute; *top: 50%; *vertical-align: top;
vertical-align: middle;
margin: 0px 5px 0px 0px;
padding: 10px 10px;
width: 200px;
}
.right-forIE {
*position: absolute;
*top: -50%;
}
.right a.btn {
display: block;
padding: 0 10px;
font-size: 12px; line-height: 24px;
font-weight: bold;
color: #FFF;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
background: #966;
}
.right a.btn:hover {
color: #000;
background:#0CF;
}