Bootstrap 3 make columns of a raw all the same height - html

Question

I have a row and 2 columns in there which I am trying to make the same height as there are border lines top and bottom that should be alined, also box shadow.
I've tried tons of recommended solutions recommended here excluding the ones involving javascript, How can I make Bootstrap columns all the same height? and none worked. E.g. adding this CSS to the row class didn't work:
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
My CSS:
.contact .info {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.contact .php-email-form {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>CONTACT</h2>
</div>
<div class="row">
<div class="col-md-5">
<div class="info">
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>email</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Telephone:</h4>
<p>95 966 0</p>
</div>
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Messenger:</h4>
<p>address</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Whatsapp:</h4>
<p>745 2720</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Telegram:</h4>
<p>745 2720</p>
</div>
</div>
</div>
<div class="col-md-7">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">N</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="name">Mobile</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group col-md-6">
<label for="name">F</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
</div>
<div class="form-group">
<label for="name">T</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group">
<label for="name">U</label>
<textarea class="form-control" name="message" rows="6" required></textarea>
</div>
<div class="err">
<div class="processing">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent.!</div>
</div>
<div class="text-center"><button type="submit">Send</button></div>
</form>
</div>
</div>
</div>
</section>

Answer 1

You have to be very specific with your css.
I added a border to your cols so you have a visual of the col height.
BS3 was not designed to work with flex, but that doesn't mean it can't.
Update:
Created 2 css classes .d-flex, and .d-flex-item
In CSS flex model display:flex items make their children flex items which by default stretch to fit their container's height.
This goes only one level deep so to make this work with your layout:
div.row is a flex container
div.col-md-5:
is a flex item of its parent: div.row
is a flex container to its child div.info
div.info is a flex item of its parent: div.col-md-5
div.col-md-7 is a flex item of its parent: div.row
All of this is to allow the flex items to stretch to their parent containers. Setting a CSS height on any flex-item will override the default stretch for that item.
/* No changes here to your css */
.contact .info {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
.contact .php-email-form {
padding: 30px;
background: #fff;
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}
/* flex css, see your HTML class attribute */
.d-flex {
display: flex;
}
.d-flex-item {
flex: 1 0 auto;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<section id="contact" class="contact">
<div class="container">
<div class="section-title">
<h2>CONTACT</h2>
</div>
<div class="row d-flex">
<div class="col-md-5 d-flex-item d-flex">
<div class="info d-flex-item">
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>email</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Telephone:</h4>
<p>95 966 0</p>
</div>
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Messenger:</h4>
<p>address</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Whatsapp:</h4>
<p>745 2720</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Telegram:</h4>
<p>745 2720</p>
</div>
</div>
</div>
<div class="col-md-7 d-flex-item">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="form-group col-md-6">
<label for="name">N</label>
<input type="text" name="name" class="form-control" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="name">Email</label>
<input type="email" class="form-control" name="email" id="email" required>
</div>
<div class="form-group col-md-6">
<label for="name">Mobile</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group col-md-6">
<label for="name">F</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group col-md-6">
<label for="name">T</label>
<input type="text" class="form-control" name="subject" id="subject" required>
</div>
<div class="form-group col-md-6">
<label for="name">U</label>
<textarea class="form-control" name="message" rows="6" required></textarea>
</div>
<div class="err">
<div class="processing">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent.!</div>
<div class="text-center"><button type="submit">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>