JSFiddle - React, Tailwind, and code Playground

by masbicudo

HTML

<div id="blocoexpai" style="font-size:48px; white-space: nowrap">
    I
    <div class="blocoexp" style="vertical-align: bottom;">
        bottom
    </div><div class="blocoexp" style="vertical-align: bottom;"></div>
    I
    <div class="blocoexp" style="vertical-align: middle;">
        middle
    </div><div class="blocoexp" style="vertical-align: middle;"></div>
    I
    <div class="blocoexp" style="vertical-align: top;">
        top
    </div><div class="blocoexp" style="vertical-align: top;"></div>
    I
    <div class="blocoexp" style="vertical-align: baseline;">
        baseline
    </div><div class="blocoexp" style="vertical-align: baseline;"></div>
    I
    <div class="blocoexp" style="vertical-align: text-bottom;">
        text-bottom
    </div><div class="blocoexp" style="vertical-align: text-bottom;"></div>
    I
    <div class="blocoexp" style="vertical-align: text-top;">
        text-top
    </div><div class="blocoexp" style="vertical-align: text-top;"></div>
    I
    <div class="blocoexp" style="vertical-align: sub;">
        sub
    </div><div class="blocoexp" style="vertical-align: sub;"></div>
    I
    <div class="blocoexp" style="vertical-align: super;">
        super
    </div><div class="blocoexp" style="vertical-align: super;"></div>
    I
</div>

CSS

.blocoexp{
    display: inline-block;
    min-width: 10px;
    height: 100px;
    border: 1px solid black;
    font-size: 12px;
    margin: 0;
}