JSFiddle - React, Tailwind, and code Playground

by Kiran Duggal

HTML

<div class="main-div">
  <div class="wrapper">
    <div class="row">
      <div class="vertical-line-auto"></div>
      <div class="icon-wrapper">
        <div class="icons-circle">1 </div>
      </div>
      <div class="text-wrapper pull-right">
        <div class="text-text ">Created</div>
        <div class="text-text"><span>Requested by</span><a>paul</a></div>
        <div class="text-text ">text 1</div>
      </div>
    </div>
    <div class="row">
      <div class="vertical-line-auto"></div>
      <div class="icon-wrapper">
        <div class="icons-circle">1 </div>
      </div>
      <div class="text-wrapper pull-right">
        <div class="text-text ">Created</div>
        <div class="text-text"><span>Requested by</span><a>paul</a></div>
        <div class="text-text ">text 1</div>
      </div>
    </div>

   <div class="row">
      <div class="vertical-line-auto"></div>
      <div class="icon-wrapper">
        <div class="icons-circle">1 </div>
      </div>
      <div class="text-wrapper pull-right">
        <div class="text-text ">Created</div>
        <div class="text-text"><span>Requested by</span><a>paul</a></div>
        <div class="text-text ">text 1</div>
      </div>
    </div>




  </div>
</div>











<!--div class="wrapper">
    <div class="icon-wrapper">
      <div class="icons-circle">

      </div>
      <div class="icons-circle">

      </div>
      <div class="icons-circle">

      </div>
    </div>
    <div class="text-wrapper">
      <div class="text-text">text 1</div>
      <div class="text-text">text 1</div>
      <div class="text-text">text 1</div>
    </div>
  </div-->

CSS

.main-div {
  min-width: 150px;
}

.wrapper {
  /*border: red solid 1px;*/
  width: 100%;
  min-width: 150px;
}

.wrapper .row:first-child .vertical-line-auto {
  top:8px;  
}

/*.wrapper .row:last-child .vertical-line-auto{}*/
.row {
  /*border: dotted red 1px;*/
  margin: 0px;
  min-width: 150px;
  position: relative;
}

.icon-wrapper {
  /*border: green solid 1px;*/
  width: 40px;
  float: left;
  min-height: 100%;
  position: absolute;
}

.vertical-line-auto {
  width: 4px;
  min-height: 100%;
  height: 100%;
  background: blue;
  position: absolute;
  left: 21px;
  z-index: -1;
}

.icons-circle {
  width: 25px;
  height: 25px;
  background: grey;
  border-radius: 50%;
  color: #ffffff;
  padding-top: 3px;
  text-align: center;
  position: absolute;
  top: 23%;
  left: 24%;
  bottom: 0;
  right: 0;
}

.text-text {
  padding: 11px;
  /*border: blue solid 1px;*/
  float: left;
  width: 33%;
}

.text-wrapper {
  /*border: green solid 1px;*/
  width: 85%;
}