Как разместить два деления на одной нижней строке?

Question

Я хочу, чтобы мой второй div был в той же позиции, что и первый. Если текст над первым синим блоком длиннее, то мой второй элемент выглядит так, как будто он находится вне строки блока. Изменение относительного положения не улучшит ситуацию, если текст над синим квадратом будет короче, чем второй блок, который отображается ниже и выглядит ужасно. Все значения изменялись динамически, поэтому мне не нужно просто менять положение вручную.

.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

Это classi c CSS aligment с flex.

Попробуйте добавить следующее в .bot-char-val:

.bot-char-val {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}

И удалить поплавки и поля из:

.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

Вы можете использовать display flex до parent и align-self: flex-end; до child, чтобы решить вашу проблему.

.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

Минимальный пример с 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>