JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<ul>
    <li class="step">
        <div class="wrap">
            <div class="num">1.</div>
            <div class="title">First title</div>
            <div class="extra"></div>
        </div>
    </li>
    <li class="step">
        <div class="wrap">
            <div class="num">2.</div>
            <div class="title">Second title</div>
            <div class="extra"></div>
        </div>
    </li>
    <li class="step">
        <div class="wrap">
            <div class="num">3.</div>
            <div class="title">Third title</div>
            <div class="extra">Testa sdfas fasdf as asdfas f</div>
        </div>
    </li>
</ul>

CSS

body {
    padding: 10px;
}
ul {
    list-style-type: none;

}
li {
    width: 100%;
    background-color: fuchsia;
}
.wrap {
   
    width: 100%;
}
.num,
.title
 {
    display: table-cell;
    background-color: lightgray;
    
}

.extra:after {
    content: "\2713";
}

.title {
    text-align: left;
}
.num {
  padding-right: 6px;  
    width: 10px;
}
.extra {
   
    background-color: Green;
    color: White;
    text-align: right;
    display: table-cell;
}