JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <div class="outer-wrapp">
   <div class="row">
    <div class="col-xs-6 col-sm-6">
      <ul class="left">
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
               <span>Text</span>
            </div>
          </div>
        </li>
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
            </div>
          </div>
        </li>
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-xs-6 col-sm-6">
      <ul class="right">
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
            </div>
          </div>
        </li>
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
            </div>
          </div>
        </li>
        <li>
          <div class="wrapp">
            <div class="box">
              <div class="circle"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
 </div>

CSS

.outer-wrapp {
  padding:30px;
}
ul {
  list-style:none;
  padding:0;
}
ul li {
      margin: 55px 0px;
}
.wrapp{
  padding:0px 15px;
}
.box span {
  color:#000;
}
.left .box {
  position:relative;
  width:95%;
  height:35px;
  border:1px solid #ccc;
  margin-left: 5%;
  padding-left: 20%;
}
.left .circle {
  position:absolute;
  width:75px;
  height:75px;
  border-radius:50%;
  background:#ccc;
  top: calc(50% - 37.5px);
  left: -37.5px;
}

.right .box {
  position:relative;
  width:95%;
  height:35px;
  border:1px solid #ccc;
  margin-right: 5%;
  padding-right: 20%;
}
.right .circle {
  position:absolute;
  width:75px;
  height:75px;
  border-radius:50%;
  background:#ccc;
  top: calc(50% - 37.5px);
  right: -37.5px;
}