When trying to align my second div with the first one, I face an issue. If the text above the first blue box is longer, the second div appears to be outside the line of the box. Changing the relative position doesn't solve this problem either. When the text above the blue box is shorter, the second box ends up looking misplaced below, which is not ideal. Since all values are dynamic, manual adjustments won't work for me.
https://i.sstatic.net/uFA2O.png
.char-span {
font-size: 13px !important;
display: block;
margin: 0px !important;
}
.bot-char-all {
margin-top: -10px;
float: left;
min-width: 120px;
}
.bot-char {
padding-top: 5px;
float: left;
}
char {
margin-bottom: 5px;
margin-right: 20px;
width: 200px;
display: inline-block;
}
.char-pre {
margin-top: 5px;
padding: 10px 5px;
border: 2px solid #192E7B;
}
.box-vals {
margin-right: 50px;
float: left;
margin-bottom: 10px;
}
.char, .char-value {
display: inline-block;
width: 100px;
}
.char-pre-val.snow-val {
background: #CFD1AF;
}
.char-pre-val {
margin-top: 5px;
padding: 10px;
color: white;
}
.char-val-span {
margin: 0 auto;
display: table;
font-size: 20px;
position: relative;
top: 2px;
}<div class='bot-column'>
<div class='bot-char-val'>
<div class='bot-char-all'>
<div class='bot-char'>
<div class='char'><span class='char-span'>Characteristic value of snow load</span>
<div class='char-pre snow'><span id='snowLoad-print' class='char-val-span long'>s<sub>k</sub> = 0.85 kN/m<sup>2</sup></span></div>
</div>
</div>
</div>
<div class='box-vals'>
<div class='char-value'><span class='char-span'>Snow</span>
<div class='char-pre-val snow-val'> <span id='snowLoadZone-print' class='char-val-span'>2*</span> </div>
</div>
</div>
</div>
</div>