How can I get the child divs to match the height of the parent?

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
        <div class="border">
          <h3>About Me</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-xs-12 col-md-6 block">
              <h4>Weddings</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Studio</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Nature</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Events</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

I need help achieving a layout like this:

Desired layout

I'm having trouble getting the child divs on the right to match the height of the parent. Any help would be much appreciated.

Answer 1

.container-fluid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.container-fluid .row .about-info {
  margin: 40px;
}
.container-fluid .row .about-info .border {
  border: 1px solid #0086c5;
  padding: 40px;
}
.container-fluid .row .about-info .border h3 {
  color: #0086c5;
}
.container-fluid .row .about-container .container-fluid {
  height: 100%;
  background: #0086c5;
}
.container-fluid .row .about-container .container-fluid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}
.container-fluid .row .about-container .container-fluid .row > div {
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.container-fluid .row .about-container .container-fluid .row > div h4 {
  align-self: center;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-child(2n)) {
  border-right: 2px solid #fff;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-last-child(-n + 2)) {
  border-bottom: 2px solid #fff;
}

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
        <div class="border">
          <h3>About Me</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-xs-12 col-md-6 block">
              <h4>Weddings</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Studio</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Nature</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Events</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 2

Here is the code for your solution. Please check

.h-100{
  height:100%;
}
.h-50{
  height:50%;
}
.block{
  text-align:center;
  background-color:#f2f2f2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
            <div class="border">
                <h3>About Me</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
            <div class="container-fluid h-100">
                <div class="row align-items-center h-100">
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Weddings</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Studio</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Nature</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"> <h4>Events</h4> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

In order for children to match the width and height of their parent element you need to remove all padding and margins from the child element. You can then set the height and the width of the child to 100%. The height and width would then be controlled by the parent element.