How to Keep Two Side-By-Side Div Elements the Same Height

How do I keep two side-by-side div elements the same height?

Flexbox

With flexbox it's a single declaration:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

CSS: Placing two side by side divs on the same height

Here's how you can solve this:

Fiddle for side-by-sides at the same height

CSS

.jumbotron {
    width: 100%;
    overflow: hidden;
    background-color: white;
    padding: 30px;
    font-size: 0;
}
.jumbotron > div {
    display:inline-block;
    vertical-align: top;
    font-size: 1rem;
}
.text {
    width: 20%;
}

Explanation

So we got rid of all your floats. You potentially could have solved this by floating both elements, but it potentially could introduce some further problems if you had multiple elements of different heights.

Then, we replaced the float with display:inline-block; as this will treat each div as a layout element that can be sized like a div normally can, but doesn't default to consume all available horizontal space.

Lastly, we set the font-size: 0 on the .jumbotron element so your inline-blocks wouldn't get pushed apart by white space between the end and start of the tags. We then reset the font-size to the default font size using font-size: 1rem.

Hope that helps.

How can I make two divs the same height where one of them has to keep a square aspect ratio?

Use this for .image-large and it will be fixed:

&.image-large {
    height: 0;
    padding-bottom: calc(50% - 12px);
  }

And the reason is that column height is decided based on content height or the size of tallest column in the same row. (I mean the visible row that column resides in, not the row tag). Since your col-4 columns have a content with height (which is provided by padding), the other one automatically becomes same as it. In the last row however, the column has no reference height to inherit, and that's why the image inside it can't take more than 50px height which is set as the minimum. What I did is giving the images in large columns a height in a similar manner you gave height to the smaller images. (Extra 12 pixel was there because of 24px gap between columns, that's why I subtracted that)

Make side by side divs have same height as one another

You can use Flexbox

.infowrap {  display: flex;}
.infobox {  flex: 1;  background: #F0F0DF;  margin: 10px;}

<div class=infowrap>  <div class=infobox>    <span class="mobhide">blurb</span>    <p><b>more stuff here</b>  </div>  <div class=infobox>    <span class="mobhide">blurb</span>    <p><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam omnis maxime ullam veniam.</b>  </div>  <div class=infobox>    <span class="mobhide">blurb</span>    <p><b>more stuff here</b>  </div></div>

Let two divs have the same height

Demo

the simplest solution is to wrapper both the divs in a div and make it display flex;

html

<div class="wrapper">
    <div id="div1">ABC</div>
    <div id="div2">ABC DEF GHI JKL MNO</div>
</div>

css

.wrapper {
    display: flex;
}