Показать 3 отдельные кнопки, где 1 охватывает высоту двух рядом с ним

Question

У меня есть 3 отдельные кнопки, которые отображаются. Я пытаюсь заставить кнопку A охватить кнопки B и C, которые сложены друг на друга. Когда высота B и C изменяется, я хочу, чтобы кнопка A соответствовала этому. Что css требуется для этого? Я использую стороннюю библиотеку для своих кнопок.

'& .buttonA': {
      width: '50px',
    },

'& .stackedButtons': {
      width: '200px',
    },

'& .test': {
      display: 'inline-flex'
    },


    <Button className="buttonA" />
    <div className="test">
      <Button className="stackedButtons" />
    </div>
    <br />
    <div className="test">
    <Button className="stackedButtons" />

Образец:

Answer 1

Flexbox с двумя колонками

.container {
  display: flex;
  width: 80%;
  margin: 1em auto;
  padding: 1em;
}

.container>div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.container div {
  flex: 1 0 auto;
}

button {
  width: 100%;
  height: 100%;
}

<div class="container">
  <div>
    <button>Button A</button>
  </div>
  <div>
    <button>Button B</button>
    <button>Button C</button>
  </div>
</div>

CSS -Сетка .. внутренние оболочки не требуются.

.container {
  display: grid;
  width: 80%;
  margin: 1em auto;
  padding: 1em;
  grid-template-columns: 1fr 1fr;
}

.alpha {
  grid-row: 1 / span 2;
}

<div class="container">
  <button class="alpha">Button A</button>
  <button class="">Button B</button>
  <button class="">Button C</button>
</div>

Answer 2

.container{
  display: flex;
  flex-direction: column;
  
}

.container--button{
  flex: 1;
}

.simple-button button {
  width: 100%;
}

.multiple-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
}

.multiple-buttons button{
  flex: 1;
}

<div class="container">
<div class="container--button simple-button">
  <button>Button A</button>
</div> 
<div class="container--button multiple-buttons">
  <button>Button B</button>
  <button>Button C</button>
</div> 
</div>