css - 最小の高さの div に基づく CSS div の等しい高さ

Question

身長を固定せずに解決したいこの問題があります。ボタンには Bootstrap 4 を使用しています。

私の HTML は次のように構成されています: 2 つの div ( LeftとRight ) を含む 1 つの div、Leftには短いテキストが含まれ、Rightには 5 つのボタン (またはそれ以上) がフレックス表示に含まれます。右はボタンを列に表示しますが（私が欲しいので）、コンテンツをラップしません。すべてのボタンを1つの列に収めるために左と右の両方の高さを増やします。

私が望むのは、グローバルの高さをLeftの高さに固定することです。Rightは、ボタンを 2 列に配置することでこの高さに適応する必要があります。私の唯一の解決策は、divの高さを手動で修正することですが、これは機能していますが、もっと良い方法があると確信しています。

ここに簡略化されたコード HTML と CSS があります。また、コードペンもあります (最後に必要なものを確認したい場合は、身長をコメントしました): https://codepen.io/julianlecalvez/pen/dwEoax

.gray-inner-block {
  margin-top: 40px;
  background-color: #f2f2f2;
  padding: 40px;
}

#mybuttons {
  display: flex;
}

#mybuttons .inner-block {
  width: 50%;
}

#mybuttons .right-block {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 	height: 150px; */
}

#mybuttons .right-block div {
  width: 150px;
  height: 40px;
  margin-bottom: 10px;
  flex-basis: 0;
}

.inner-block .maintitle {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.inner-block .subtitle {
  font-size: 20px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div id="mybuttons" class="gray-inner-block buttons buttonsout">
  <div class="inner-block left-block">
    <div class="maintitle">Use these buttons to maipulate the interface</div>
    <div class="subtitle">Each button can be use independently</div>
  </div>
  <div class="inner-block right-block">
    <div>
      <a class="btn btn-primary" role="button">Bouton 1</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 2</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 3</a>
    </div>

    <div>
      <a class="btn btn-primary" role="button">Bouton 4</a>
    </div>
    <div>
      <a class="btn btn-primary" role="button">Bouton 5</a>
    </div>
  </div>
</div>