JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<div class="forall">
    <div class="inText">Hello g World /With font-size 46px
        <div class="strut"></div>
    </div>
</div>
<div class="forall">
    <div class="inText2">Hello g World /With font-size 32px
        <div class="strut"></div>
    </div>
</div>
<div class="forall">
    <div class="inText3">Hello g World /With font-size 32px
        <div class="strut"></div>
    </div>
</div>

<h2>
no strut
</h2>

<div class="par">
  <div class="first">Hello g World / With font-size: 24px</div>
</div>

CSS

div.forall {
    width: 900px;
    height: 48px;
    border: thin black solid;
    background-color: #9BBCE3;
    margin-top:20px;
}

.inText {
    font-size: 48px;
    line-height:48px;
}
.inText3 {
    font-size: 22px;
    line-height:22px;
}
.strut {
    height: 48px;
    display: inline-block;
}



.par {
  width: 800px;
  height: 100px;
}
.first {
  font-size: 24px;
  background-color: #9BBCE3;
}
.first::after {
  content: "";
  height: 100%;
  display: inline-block;
}