How to place two divs on one bottom line? - html

Question

I want my second div to be on the same position with the first one. If text above first blue box is longer, than my second div appears like it off the box line. Changing relative position would not make it better, if the text above blue box would be shorter, than second box appears more below and it looks awful. All values changed dynamically, that why i need not just change position manually.
.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'>Charakteristischer Wert der Schneelast</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>

Answer 1

This is classic CSS aligment with flex.
Try adding the following to .bot-char-val:
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
And remove floats and margins from:
.box-vals {
float: none;
margin-bottom: 0;
}
.bot-char-all {
float: none;
}
.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;
}
.box-vals {
float: none;
margin-bottom: 0;
}
.bot-char-all {
float: none;
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
<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'>Charakteristischer Wert der Schneelast</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>

Answer 2

You can use display flex to parent and align-self: flex-end; to child will solve your problem.
.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;
}
.box-vals {
align-self: flex-end;
margin-bottom: 0;
}
.bot-char-all {
align-self: flex-end;
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
}
<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'>Charakteristischer Wert der Schneelast</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>

Answer 3

Minimal example with flex-box:
.bot-column {
max-width: 220px; /* for demo purposes */
}
.bot-char-val {
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
}
.bot-char-all,
.box-vals {
padding: 1em;
width: 50%;
}
.char-pre {
border: 2px solid #192E7B;
padding: 0.2em 1em;
}
.char-pre-val {
background: #CFD1AF;
color: white;
padding: 0.2em 1em;
}
<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'>Charakteristischer Wert der Schneelast</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>