具有不同字体大小的独立段落的基线相同

Question

Basically I want to align both lines to appear on the same line, but I really have no idea how to do this properly. Any help is appreciated, thanks in advance.

fiddle

HTML

<div class="first">
  <p>
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet
  </p>
</div>

<div class="second">
  <p>Align</p>
  <p>Multi</p>
  <p>
    Lines<br/>
    And<br/>
    Paragraph
  </p>
</div>

CSS

div {
  float: left;
}

p {
  margin: 0;
}

.first {
  font-size: 17px;

  //...
  width: 50px;
}

.second {
  font-size: 13px;
}

Answer 1

You can try using the display attribute to align the two DIVs side by side, this is a very basic example. The margin-right: -4px is to fix a rendering bug in some browsers where the two DIVs of 50% width in this case won't align properly beside each other.

Fiddle

div {
  width: 50%;
  vertical-align: top;
  display: inline-block;
}
p {
  margin: 0;
  display: block;
}

.second {
  margin-right: -4px;
}

Answer 2

If I understand you correctly, you want two columns. My solution for that is as follows:

CSS:

.two-col {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
    -webkit-column-gap: 1.5rem;
       -moz-column-gap: 1.5rem;
            column-gap: 1.5rem
}

HTML:

<div class="two-col">
  <p>
    Lorem<br/>
    ipsum<br/>
    dolor<br/>
    sit<br/>
    amet
  </p>
  <p>Align</p>
  <p>Multi</p>
  <p>
    Lines<br/>
    And<br/>
    Paragraph
  </p>
</div>

Of course you will need to adjust according to your needs regarding column gap. etc.