I have tried using flexbox, but the column heights are still not the same. I have looked at various methods on websites like W3Schools and Medium, but none of them seem to work. Initially, using the flex method worked, but it seems to be disappearing when I refresh the page. I am unsure why this is happening.
Can anyone please review this code and let me know if there is anything wrong with it? I would greatly appreciate any help with this issue.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<title>Bootstrap Page</title>
<style>
p{
background:rgba(25,105,25,0.4);
color:white;
}
.row{
display: flex;
flex-wrap: wrap;
}
.row > .col-md-6 {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="container">
<div class="row display-flex">
<div class="col-md-6 para1">
<div>
<p>M. Best who informed him that locomotives
could be obtained at a railroad boneyard in Mérida, Yucatán, Mexico, owned by the Ferrocarriles Unidos de Y
ucatán..</p>
</div>
</div>
<div class="col-md-6 para1">
<div>
<p> Best who informed him that locomotives
could be obtained at a railroad boneyard in mer, went to Mérida in 1969 to investigate.The development er, went to Mérida in 1969 to investigate.The developme
nt of the Walt Disney World Railroad from the late 1960s to its opening in 1971 was overseen by Roger E. Broggie,
vice president and general manager of Mapo, Inc</p>
</div>
</div>
</div>
</div>
</body>