html two span elements next to each other with equivalent height

Question

so, I have this in a html code:

<span class="a">Lorem</span>
<span class="b">Ipsum</span>

with this css:

span.a {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: left;
}

span.b {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: right;

}

and I want to make is so that both spans are always equivalent long, like, if I have multiple lines in the first but only one in the second line, the second line should be just as long as the first one

score 0 · Answer 1 · answered Jun 10 '20 at 14:38

If I understand right you can make a class for both so class c where you give all span tags the same attributes.

c {
    display: block;
    border: 1px solid #60ddfc;
    width: 40%;
    padding: 1%;
    float: right;
}

Your spans should have these class <span class="a">Lorem</span>. Does this answer your question?

score 0 · Accepted Answer · answered Jun 10 '20 at 14:41

I would recommend using a flexbox. That way you also do not need floats.

div {
  display: flex;
}

span.a {
  display: block;
  border: 1px solid #60ddfc;
  width: 40%;
  padding: 1%;
}

span.b {
  display: block;
  border: 1px solid #60ddfc;
  width: 40%;
  padding: 1%;
}

<div>
  <span class="a">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <span class="b">Lorem Ipsum</span>
</div>

html two span elements next to each other with equivalent height

2 Answers2