JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

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

CSS

p 
  {
        border: 1px solid #0a0;
        position: relative;
        background: #fafafa;
        font-size: 25px;    /*меняем размеры шрифта, смотрим межстрочное расстояние*/
  }
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;
    }