title: How to place two divs on one bottom line?
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/uFA2O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFA2O.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='bot-column'&gt;
  
    &lt;div class='bot-char-val'&gt;
      &lt;div class='bot-char-all'&gt;
        &lt;div class='bot-char'&gt;
          &lt;div class='char'&gt;&lt;span class='char-span'&gt;Charakteristischer Wert der Schneelast&lt;/span&gt;
            &lt;div class='char-pre snow'&gt;&lt;span id='snowLoad-print' class='char-val-span long'&gt;s&lt;sub&gt;k&lt;/sub&gt; = 0.85 kN/m&lt;sup&gt;2&lt;/sup&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='box-vals'&gt;
        &lt;div class='char-value'&gt;&lt;span class='char-span'&gt;Snow&lt;/span&gt;
          &lt;div class='char-pre-val snow-val'&gt; &lt;span id='snowLoadZone-print' class='char-val-span'&gt;2*&lt;/span&gt; &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>