Align text with different font-size in flexbox

align-text-with-different-font-size-in-flexbox.markdown

Align text with different font-size in flexbox

A Pen by Peter Broschwitz on CodePen.

License.

index.html

<input type="checkbox" id="toggleBorders" />
<label for="toggleBorders">Toggle borders</label>

<input type="checkbox" id="togglePosition" />
<label for="togglePosition">Toggle baseline/bottom</label>

<hr>

<div id="wrapper">  

  <div class="inner">
    <div class="term">
      Result:
    </div>
    <h1 class="title">
      „Real”
    </h1>
    <div class="count">
      (1 article)
    </div>
  </div>
  
  <hr>

  <div class="inner">
    <div class="term">
      Result:
    </div>
    <h1 class="title">
      „The real thing”
    </h1>
    <div class="count">
      (118 articles)
    </div>
  </div>

  <hr>

  <div class="inner">
    <div class="term">
      Long search result introduction for as you get to know it:
    </div>
    <h1 class="title">
      „Real”
    </h1>
    <div class="count">
      (1 article)
    </div>
  </div>
  
  <hr>

  <div class="inner">
    <div class="term">
      Result:
    </div>
    <h1 class="title">
      „The real thing is what you're looking for”
    </h1>
    <div class="count">
      (118 articles)
    </div>
  </div>

  <hr>

  
  <div class="inner">
    <div class="term">
      Result:
    </div>
    <h1 class="title">
      „The real thing is what you're looking for”
    </h1>
    <div class="count">
      (1 article)
    </div>
  </div>

  <hr>

  <div class="inner">
    <div class="term">
      Result:
    </div>
    <h1 class="title">
      „The real thing is what you're looking for”
    </h1>
    <div class="count">
      (11 articles)
    </div>
  </div>


</div>

script.js

document.getElementById("toggleBorders").addEventListener('click', function (event) {
  if (event.target && event.target.matches("input[type='checkbox']")) {
    let wrapper = document.getElementById('wrapper')
    wrapper.classList.toggle('show-border')
  }
});

document.getElementById("togglePosition").addEventListener('click', function (event) {
  if (event.target && event.target.matches("input[type='checkbox']")) {
    let wrapper = document.getElementById('wrapper')
    wrapper.classList.toggle('align-bottom')
  }
});

style.css

.inner {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  width: 100%;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

  .term {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin-right: 10px;
    
    /*flex: 0 0 auto;*/
    flex-shrink: 2;
    flex-grow: 0;
    flex-basis: auto;
    align-self: center;
  }

  .title {
    padding-right: 8px;
    font-weight: 700;
    line-height: normal;
    font-size: 28px;
    color: #164194;
    margin-bottom: 0;
    margin-top: 0;
    
    /*flex: 0 1 auto;*/
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: center;    
  }

  .count {
    font-size: 16px;
    color: #707c80;
    line-height: normal;
    
    /*flex: 0 2 clamp(100px, 110px, 140px);*/
    flex-grow: 0;
    flex-shrink: 2;
    flex-basis: 90px;  /* IE11 */
    flex-basis: clamp(80px, 90px, 160px);
    /*flex-basis: auto;*/
    align-self: center;
    white-space: nowrap;
  }

.align-bottom .inner {
  align-items: flex-end;
}
.align-bottom .term,
.align-bottom .title,
.align-bottom .count {
  align-self: flex-end;
}

.show-border .term {
  outline: 1px dashed lime;
}
.show-border .title {
  outline: 1px dotted orangered;
}
.show-border .count {
  outline: 1px dotted aqua;
}