JSFiddle - React, Tailwind, and code Playground

by Manuel Souto Pico

HTML

<div></div>

<div dir="rtl">

  (<span><span>18</span><span>26</span></span>)

	<div dir="ltr" border=1>
		<div class="eq-part">
		 ‪المساحة ‎=  
	  </div>
    
		<div class="eq-part">
     	<span id="fra4" class="top1">1</span>
			<span id="fra5" class="top2">–</span>
			<span id="fra6" class="bottom1">2</span>
      
    </div>
    
    <div class="eq-part">
			<span id="rest"><i>b</i> × <i>h</i></span>
		</div>
	</div>

</div>

CSS

div {
    font-size: 40px;
    color: #515151;
}

div > span {
    font-size: 18px;
    display: inline-block;
}

div > span > span {
    display: block;
    padding: 0 5px;
    position: relative;
    top: 5px;
}

div > span > span:first-child {
    border-bottom: 1px solid #515151;
    color: green;
}

div > span > span:last-child {
    color: tomato;
}