Make two elements the same height dynamically with CSS

Question

I have two containers: left and right. left contains text in it's top and buttons in it's bottom; right contains other components, centered. right' height is always higher than left's, but I don't neither right's nor left's heights. I want to align the start of the text of left with the start of right and the left's buttons with the right's end. In order to do so, I'm trying to make both of them the same height, but I'm failing at that.

This is the visual effect I would like to have:

Here's an example code:

<div id="parent" className="flex items-center justify-center vh-100 w-100">
    <div id="left" className="flex flex-column justify-between">
        <Text />
        <Buttons />
    </div>
    <div id="right" className="flex items-center justify-center">
        <TallStuff />
    </div>
</div>

I'm using Tachyon's classes to illustrate.

I have already tried to use flex: 1, flex-grow, align-items: stretch, height: 100% and others on left to no avail.

I'm rewriting to make my situation clearer. I hope this help you guys to help me.

I have this screen where a user can click in a book and see info about it:

The books are gotten through a third-party API, so I never know exacly how big they are. And since this screen is yet on development I don't know if the column to the right will always be like they are now. When things go wrong (i.e., the text is too small) I got something like this:

Where I would like something more like this:

This is the code for the screen you see:

<div className="flex h-100 items-center w-100">
    <section className="pt3 w-40">
        <Card
            authors={authors}
            cover={cover}
            date={date}
            plataforms={plataforms}
            synopsis={synopsis}
            title={title}
        />
    </section>
    <section className="flex flex-column items-center justify-center w-60">
        <BookCarousel books={data} title="main feeling" />
        <BookCarousel books={data} title="main feeling" />
    </section>
</div>

This is the JSX of the <Card> component:

<article class="flex flex-column items-center justify-between pl3 pr3">
    <section>
    <Cover alt={title} src={cover} className="fl mr3" />
        <h2 className="di f5 ma0">{title}</h2><br/>
        {signature}<br/><br/>
        {summary}
    </section>
    <section className="flex">
        // buttons
    </section>
</article>

It's written with React. (CSS still is Tachyons)

you're question isn't about making elements the same height and shouldn't be your main focal point. You should focus on aligning the content *in* the elements. There are examples [here](https://stackoverflow.com/questions/24697267/flexbox-column-align-self-to-bottom) and [here](https://stackoverflow.com/questions/47784963/cant-get-my-buttons-to-align-correctly-using-flexbox) or adding space between for example. Many examples online about this and perhaps show what you have tried instead of simply listing it, it's possible its a simple typographical error or other trivial fix — soulshined, Mar 01 '19 at 03:35
Possible duplicate of [Flexbox column align self to bottom](https://stackoverflow.com/questions/24697267/flexbox-column-align-self-to-bottom) — soulshined, Mar 01 '19 at 03:46
I have tried all the answers except for jaasum's (I'm reading the Grid guide) and none worked. Maybe they are not working because I'm implementing them wrong (the abstraction I offered here may not be exact) or I have addressed the problem by the wrong way, as soulshined has said. I'll rewrite the post with my exacle situation for I didn't get how Flexbox column align self to bottom answers it.. — Henrique Guerra, Mar 01 '19 at 03:58
I believe mine accomplishes what you're looking for. But does require to work from the top down. — jaasum, Mar 01 '19 at 04:37

score 1 · Answer 1 · answered Mar 01 '19 at 03:20

Here is a quick example using plain HTML and CSS.

  #parent {
    display: flex;
  }
  #left {
    display: flex;
    flex-direction: column;

    background: red;
  }
  #text {
    flex-grow: 1;
  }
  #right {
    flex-grow: 1;
    display: flex;
    align-items: center;

    /* arbitrary height for demo */
    height: 500px;
    background: blue;
  }

<div id="parent">
    <div id="left">
        <div id="text">
          <p>Text</p>
        </div>
        <div id="buttons">
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
          <button>Button</button>
        </div>
    </div>
    <div id="right">
      <div id="tallstuff">
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
        <p>TallStuff</p>
    </div>
</div>

I tried this but had no success. If you look at the edited post, you will se that Text and Buttons are both inside a container (that I call ``). Does `flex-grow` works differently in containters? — Henrique Guerra, Mar 01 '19 at 04:24

PPShein · Answer 2 · 2019-03-01T03:44:00.437

.row {
  display: flex;
}

.col {
  flex: 1;
}

<div class="row">
  <div class="col">In 2012, I found myself looking for a job. The startup I was working in was winding down and I spent my time idly looking for interesting things to do. </div>
  <div class="col">When AppsFlyer started, it was just 2 guys — Oren, the CEO, doing all the business and Reshef, the CTO, writing all the code. Reshef decided to write AppsFlyer, at the beginning, in Python. Why Python? Well, if you’re a startup that needs to grow and change code very rapidly, Python will probably serve you best. It’s a super simple language with a vast ecosystem that is both interpreted and dynamically typed, which means it’s really malleable and easy to twist and change. When I joined Reshef in writing the code, that’s what we did — we hacked away in Python to our heart’s content. We designed a microservice-oriented architecture that revolved around different Python services, which communicated mainly via pub/sub and http calls (which later evolved into a mostly async communication flow based on Kafka). This served us well for the first year and a half of AppsFlyer’s growth.</div>
</div>

@Cutwow475 now then, we are not required to use `media query` rather than `flex`. I've tested above code and it was working fine. — PPShein, Mar 01 '19 at 03:43
It actually doesn't answer the question at all @PPShein the title of the OP is making the 2 elements same height, but if you read the question they are trying to align the last child element to the bottom of the column. — soulshined, Mar 01 '19 at 03:45

score 0 · Answer 3 · answered Mar 01 '19 at 03:16

The CSS Grid Way

I'd recommend starting with the CSS Tricks article that explains how to set up a basic grid and place elements within it.

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
}

.grid-x-lefttop,
.grid-x-leftbottom {
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-x-lefttop {
  background-color: green;
  grid-row-start: 1;
  grid-row-end: 2;
}

.grid-x-leftbottom {
  background-color: blue;
  align-self: end;
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-x-right {
  background-color: aqua;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

<div class="grid">
  <div class="grid-x-lefttop">
    <p>Left column text</p>
  </div>
  <div class="grid-x-leftbottom">
    <button>Left column button</button>
  </div>
  <div class="grid-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

The Flexbox Way

You can also achieve this with nested flexbox items.

.flexcontainer {
  align-items: stretch;
  display: flex;
}

.flexcontainer-x-left,
.flexcontainer-x-right {
  flex: 1 1 100%;
}

.flexcontainer-x-left {
  background-color: green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexcontainer-x-buttons {
  background-color: blue;
}

.flexcontainer-x-right {
  background-color: aqua;
}

<div class="flexcontainer">
  <div class="flexcontainer-x-left">
    <div class="flexcontainer-x-text">
      <p>Left column text</p>
    </div>
    <div class="flexcontainer-x-buttons">
      <button>Left column button</button>
    </div>
  </div>
  <div class="flexcontainer-x-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id nisl vitae dolor porta ornare. Ut tincidunt rutrum ante sit amet tincidunt. Etiam gravida neque ut nisi tincidunt viverra. Ut maximus tincidunt ultricies. Cras tristique orci vel blandit hendrerit. Aliquam luctus nisl euismod porttitor dignissim. Praesent quis turpis convallis, venenatis magna sed, suscipit mi. Sed ac nisl sed felis fermentum imperdiet. Pellentesque vel ullamcorper arcu, quis aliquam ante. Proin molestie magna ac convallis hendrerit.</p>
    <p>Curabitur rutrum sollicitudin libero id ullamcorper. Nunc auctor dapibus mauris, sed viverra dui eleifend quis. Donec ut odio in sapien dictum pellentesque. Ut mauris enim, tristique a ultrices eu, tempor nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in justo cursus, facilisis sem sodales, iaculis diam. Cras venenatis arcu nisi. Nunc vel scelerisque orci. Vestibulum sit amet metus id augue maximus congue. Cras pretium fringilla dapibus. Nullam sollicitudin risus sit amet elit lobortis, vitae placerat dui rutrum.</p>
  </div>
</div>

What happens when there is more text in the left top grid than the space you allowed it for? Don't think that's what the OP is looking for — soulshined, Mar 01 '19 at 03:28
Thanks for trying to clarify, but I think this is what OP is looking for. Right is always taller than left, and they want left's text aligned to right's top and the left's buttons aligned to right's bottom. — jaasum, Mar 01 '19 at 03:30
exactly, if you add more text to the left top grid it will add a ton of non essential whitespace to the right, creating, imo, a bad user experience of scrolling a ton of whitespace. Eventually, the left side's content will be far greater than the rights with your grid setup. — soulshined, Mar 01 '19 at 03:40
I don't believe so. OP stated right is always taller than left and that left and right's text should be aligned (they still would in my examples). I'll wait for the OP to weigh in - perhaps the buttons need to be position sticky if left's text pushes them below right's end. — jaasum, Mar 01 '19 at 03:51
I putted `flex: 1 1 100%` on both `
`s, children of `
`, but the whole thing broke down. I did check their height with devtools and they are the same (uhul!) but weirdly the widths as gone equal as well, and I need the left one to be only 40% of it's father. — Henrique Guerra, Mar 01 '19 at 04:48
Okay, I tried wrapping `left` (still with `flex: 1 1 100%`) on a `
` but it just killed the effect of `flex`. Then I tried putting `flex` direcly on `` but it also didn't work. — Henrique Guerra, Mar 01 '19 at 05:01
I'm not too familiar with Tachyons, but I do know that with React sometimes additional wrapping elements can make their way in when components reference each other, flex always impacts direct children so that may be something you're running into. — jaasum, Mar 01 '19 at 05:32

Make two elements the same height dynamically with CSS

3 Answers3

The CSS Grid Way

The Flexbox Way