JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <span class="radical2"></span>
    <span class="radical">hello</span>
    <span class="radicalData"></span>
</div>

CSS

body {
     font-size:28.8px;
     font-family:"Symbola";
     vertical-align:bottom;
}

 .parent{
     height:200px;
}

 .radical {
     border:1px solid #000;
     display:inline-block;
     vertical-align:bottom;
}

 .radical2 {
     border:1px solid #000;
     display:inline-block;
     height: 33px;
     position: relative;
     vertical-align:bottom;
     width: 20px;
}

 .radical2::after {
     content: "√";
     height: 33px;
     position: absolute;
     top: 7px;
     z-index: 1;
}

 .radicalData {
     height:200px;
}