How do i match left div to the right div?

Question

The scenario is simple, my goal is to stretch the left div to the right div's height

to

the code, I'm using bootstrap

<div class="row">
  <div class="col-6">
     <input placeholder="left div" />
  </div>

  <div class="col-6">
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="right div" /> /* This is the right div */
     <input placeholder="" />
  </div>
</div>

I'm not sure whether to use CSS or javascript to do this.

ksav · Answer 1 · 2020-11-21T22:53:49.847

.left input {
  height: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-6 left">
    <input placeholder="left div" />
  </div>

  <div class="col-6 right">
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="right div" />
  </div>
</div>

edit

.left input {
height: 100%;
}

[class^="col-"] {
  background: palegoldenrod
}

.pull-right {
align_items: flex-end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="row">
  <div class="col-6 left">
    <input placeholder="left div" />
  </div>

  <div class="col-6">
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="" />
    <input placeholder="right div" /> 
  </div>
</div>
<div class="row justify-content-end">
  <div class="col-6 col-offset-6">
    <input placeholder="" />
  </div>
</div>

What if there's another input underneath the right div? – airsoftFreak Nov 21 '20 at 08:58 — airsoftFreak, Nov 21 '20 at 08:58

score 0 · Answer 2 · answered Nov 21 '20 at 08:42

Another way is to use flexbox:

.row {
  display: flex;
}
.col-6 {
  display: flex;
  flex-direction: column;
}
.col-6 input {
  display: block;
  margin: 10px;
}
.col-6:first-of-type input {
  flex: 1;
}

<div class="row">
  <div class="col-6">
     <input placeholder="left div" />
  </div>

  <div class="col-6">
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="" />
     <input placeholder="right div" />
  </div>
</div>

How do i match left div to the right div?

2 Answers2