JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<h1>vertical-align Test</h1>
<p><span><b>26.8k</b></span>This means that I can play with the vertical-align of some elements in this text. This means that I can play with the vertical-align of some elements in this text.This means that I can play with the vertical-align of some elements in this text. This means that I can play with the vertical-align of some elements in this text.</p>

CSS

p 
{
    background:#ececec;
    display:inline-block;
    position:relative;
    padding-left: 60px;
}
span
{
    display:inline-block;
    border:2px solid red;
    border-radius:10px;
    position:absolute;
    top:0;
    left:0;
    width:50px;
    bottom:0;
    overflow:hidden;
}
span > b
{
    display:inline-block;
    vertical-align:-50%;
    text-align:center;
    width:100%;
    height:100%;
    position:relative;
}