Solution 1 :

Flexbox with two columns

.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-Grid.. no internal wrappers required.

.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>

Solution 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>

Problem :

I have 3 separate buttons that display. I am trying to get button A to span button B and C that are stacked on top of each other. When the height of B and C changes, I want button A to match that. What css is required for this? I am using a third party library for my Buttons.

'& .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" />

Sample:

here's the image

By