JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

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

CSS

p 
  {
        border: 1px solid #0a0;
        position: relative;
        background: #fafafa;
        font-size: 0; /*убираем воздействие strut*/
  }
p *
  {
        font-size: 16px;    
  }
p > span
  {
    vertical-align: -0.5ex; /*возвращаем базувую линию обратно туда, где бы она была, если б у нас strut был нормальных размеров*/
  }
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: 100px;
        height: 100px;
        background: #8a3;
        vertical-align: middle;
#        line-height: 100px;
    }
.txt
    {
#        vertical-align: middle;
#        line-height: 100px;
        background: rgba(255, 255, 255, .7);    
    }
.small-inline-block
    {
        width: 16px;
        height: 16px;
        display: inline-block;
        background: #e1ede8;
    }