我如何根据他自己的内容设置可变高度

Question

我有2个div，如果其中一个的高度为700px（取决于他自己的内容，没有固定的高度），则另一个也为700px。 ¿我如何使每个div的高度取决于其自身的内容，而不管另一个div的高度如何？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="main-content bg-danger mr-auto col-md-5 col-xl-4 p-5 mb-3">
    a<br>a<br>a<br>a<br>a<br>
  </div>
  <div class="main-content bg-success col-md-6 col-xl-7 p-5 mb-3">
    a
  </div>
</div>

（运行全页代码段）