Align baseline with bottom of inline-block - html

Question

The texts baseline of inline-block is not aligning at the bottom.
How do you align the radical at the bottom of inline-block instead of text bottom (baseline)?
Currently i have this
The goal is this
Current Code
https://jsfiddle.net/x9ugahdb/1/
.parent {
height: 200px;
}
.radical {
border: 1px solid #000;
display: inline-block;
vertical-align: bottom;
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>

Answer 1

You could treat the square root mark √ as content via an ::after selector. From there use position: absolute along with top: 6px to layer it over the bordered span.
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;
margin-bottom: -10px;
top: 7px;
z-index: 1;
}
.radicalData {
height:200px;
}
Working Fiddle here.

Answer 2

Add overflow:hidden to the second inline-block to move its baseline to the bottom then keep the default alignment:
.parent {
height: 200px;
}
.radical {
display: inline-block;
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical">√</span>
<span class="radical" style="overflow:hidden;">hello</span>
<span class="radicalData"></span>
</div>
You can also adjust the line-height like this:
.parent {
height: 200px;
}
.radical {
display: inline-block;
border:1px solid;
vertical-align:bottom
}
.radicalData {
height: 200px;
}
<div class="parent">
<span class="radical" style="line-height:12px;">√</span>
<span class="radical">hello</span>
<span class="radicalData"></span>
</div>