JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<p>
    xxx 
    <span class="big-inline-block">
      <span class="txt">xx100xx</span><span class="txt2">xx100xx</span><br>
      <span class="txt">xx100xx</span><span class="txt2">xx100xx</span>
    </span>
    xxx
</p>

CSS

p 
  {
        border: 1px solid #0a0;
        position: relative;
        background: #fafafa;
        font-size: 16px;
  }
p:after
        {
                content: '';
                display: block;
                position: absolute;
                left: 0; right: 0;
                top: 50%;
                border-top: 1px dashed maroon;
                transform: translateY(-50%);          
        }
.big-inline-block
    {
        display: inline-block;
        width: 200px;
        height: 100px;
        background: #8a3;
        vertical-align: middle;
#        line-height: 100px;
    }
.txt
    {
        vertical-align: middle;
#        line-height: 100px;
        background: rgba(255, 255, 255, .7);    
    }
.txt2
    {
#        vertical-align: middle;
#        line-height: 100px;
        background: rgba(255, 255, 255, .5);    
    }
    /*
.small-inline-block
    {
        width: 16px;
        height: 16px;
        display: inline-block;
        background: #e1ede8;
    }