JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div class="inner">
        <p> This is a inner div</p>
        <p>Height set to 100%</p>
        <p>Why it renderes slightly below when set to inline-block?</p>
    </div>
</div>

CSS

.outer{
    height:100%;
}
.inner{
    height:100%;
    display:inline-block;
}

p:first-child{
    margin:0;
}