Align different font-sizes on same baseline

Question

I want to align texts with different font-sizes on the same baseline.

"LOREM IPSUM SED" should be on same line as "sEa tAkImAtA SaNcTuS EsT LoReM Ip" and the same with "SED NONUMY INVIDUNT UT" and "nO SeA TaKiMaTa sAnCtUs eSt"

I've already tried this which didn't worked:

Aligning different font sizes on the same line of text so it looks nice?

How to vertically align 2 different sizes of text?

Here's my current code:

html, body{
  width: 100%;
  height:100%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.clearfix::after{
 content:"";
 clear:both;
 display: block;
}

.entire-page{
  margin: 0 5%;
}


.header-content > div{
  width:100%;
  padding: 30px 0;
}

.left{
  float:left;
}
.right{
 float: right;
}

.margin-right-header{
  margin-right: 30px;
}

.left-top{
  font-size:1.5rem;
  font-weight:300;
  color:#ff0000;
}

.left-top > span > span{
  font-weight:400;
}

.left-bottom > span{
  font-size:0.5rem;
  font-weight:400;
  color:#999;
}

.left-bottom > span > span{
  font-weight:400;
}

.right-top{
  font-size:1rem;
  font-weight:300;
  color:#ff0000;
}

.right-bottom{
  font-size:1rem;
  font-weight:300;
  color:#999;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
  </head>
  <body>
  
 <div class="entire-page">

  <header class="clearfix">
   <div>
   
    <div class="left">
      <div class="left-top"><span><span>LOREM IPSUM</span> SED</span></div>
      <div class="left-bottom"><span style="vertical-align:baseline;">SED <span>NONUMY</span> INVIDUNT UT</span></div>
    </div>

    <div class="right margin-right-header">
      <div class="right-top"><span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span></div>
      <div class="right-bottom"><span style="vertical-align:baseline;">nO SeA TaKiMaTa sAnCtUs eSt</span></div>
    </div>
  
   </div>
  </header>
 
 </div>

  </body>
</html>

please edit your question to include this: _I want that, "LOREM IPSUM SED" is on same line as "sEa tAkImAtA SaNcTuS EsT LoReM Ip" and the same with "SED NONUMY INVIDUNT UT" and "nO SeA TaKiMaTa sAnCtUs eSt"_. I will edit my answer now. — Ivan86, Jan 25 '18 at 03:14
@Ivan86 will you edit your answer or do you know somebody who knows the answer? — , Jan 26 '18 at 02:12
Another approach without hardcoding the CSS is to "measure" a specific font and generate the correct line-height etc. But this is very complicated. See https://stackoverflow.com/questions/48451054/css-line-height-relative-to-baseline-with-js/48486756#48486756 — sebilasse, Jan 29 '18 at 13:32

Johannes · Accepted Answer · 2018-01-27T01:28:45.173

For the vertical-align property to apply, the elements need to have display: inline-block. I added it in the following snippet, but I reorganized the HTML structure so that the aligned elements are inside the same parent element.

BTW, vertical-align: baseline is the default for display: inline-block, so you don't even need to write it - display: inline-block alone is sufficient.

html,
body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: 1rem;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.left-top {
  font-size: 1.5rem;
  font-weight: 300;
  color: #ff0000;
}
.left-top>span>span {
  font-weight: 400;
}
.left-bottom>span {
  font-size: 0.5rem;
  font-weight: 400;
  color: #999;
}
.left-bottom>span>span {
  font-weight: 400;
}
.right-top {
  font-size: 1rem;
  font-weight: 300;
  color: #ff0000;
}
.right-bottom {
  font-size: 1rem;
  font-weight: 300;
  color: #999;
}
.top,
.bottom {
  width: 100%;
}
.top>*,
.bottom>* {
  display: inline-block;
  width: 46%;
}

<div class="entire-page">
  <header class="clearfix">
    <div class="top">
      <div class="left-top">
        <span><span>LOREM IPSUM</span> SED</span>
      </div>
      <div class="right-top">
        <span>sEa tAkImAtA SaNcTuS EsT LoReM Ip</span>
      </div>
    </div>
    <div class="bottom">
      <div class="left-bottom">
        <span>SED <span>NONUMY</span> INVIDUNT UT</span>
      </div>
      <div class="right-bottom">
        <span>nO SeA TaKiMaTa sAnCtUs eSt</span></div>
    </div>
  </header>
</div>

Thank for the reply. But the formatting of the text is away now. — , Jan 27 '18 at 00:53
"sEa tAkImAtA SaNcTuS EsT LoReM Ip" and "nO SeA TaKiMaTa sAnCtUs eSt" should be on the right side on same vertical line — , Jan 27 '18 at 00:56
can you look over it, when you have time? https://stackoverflow.com/questions/48511266/how-to-center-vertically-a-div-with-two-lines-of-text-next-to-an-image — , Jan 30 '18 at 15:19
For anyone that might look for a flex-box solution: `align-items: baseline;` might help you out. It just helped me with aligning elements with different font-sizes to be on the same baseline. — JW Geertsma, Dec 20 '21 at 15:51

Align different font-sizes on same baseline

1 Answers1