JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="infoblock">
  <div class="column1">
    <div class="info_attribute">Status</div>
    <div class="info_result"> Open</div>
  </div>
    <div class="column2">
    <div class="info_attribute">Status</div>
    <div class="info_result"> Open</div>
  </div>
</div>

CSS

.infoblock {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border-radius: 10pt;
  margin: 0em;
  width: 100%;
  background: #E6E6E6;
}

.column1 {flex: 1;}
.column2 {flex: 1;}

.info_attribute {
  padding: .5em .5em .5em 1.2em;
  background: grey;
    border-radius: 10pt 0pt 0pt 10pt;

  display: inline-block;
}

.info_result {
  padding: .5em .5em .5em 1.2em;
  display: inline-block;

}