How to style an alert with two call to actions - html

Question

I am attempting to create an alert using html and css to look like this example below
I've been able to create this using inline CSS and it is not the desired look I was hoping for.
What is the best away to adjust my current code in order to achieve the look of the example? At the moment I using two separate divs and adjusting the margins.
<div class="row" id="alert_box">
<div class="col m2">
<div class="card red darken-1">
<div class="row">
<div class="col ">
<div class="card-content white-text">
<p style="margin-bottom: 40px">What information do you want to see? We'd love to hear from you</p>
</div>
</div>
</div>
</div>
</div>
<div class="col m1" style="
margin-left: -23px">
<div class="card red darken-1">
<div class="row">
<div>
<div class="card-content white-text">
<p>button 1</p>
</div>
<div class="card-content white-text">
<p>button 2</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

If you are not using bootstrap, then flex or grid can help you here :
flex possible example, both columns will be stretching to match the highest:
.row {
display: flex;
}
.alert,
.alert button {
background: rgb(200, 35, 51);
color: beige
}
.col,
.flex-1 {
flex: 1
}
.flex-3 {
flex: 3;
}
.flex-column {
display: flex;
flex-direction: column;
}
.m-auto {
margin: auto;
}
.m1 {
margin: 1em;
}
div,
button {
border: solid 1px #222;
}
<div class="row alert m1">
<div class="colt flex-3 flex-column ">
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
<p class="m-auto">some text standing here</p>
</div>
<div class="col flex-column">
<button class="flex-1">button 1</button>
<button class="flex-1">button 2</button>
</div>
</div>
<div class="row alert m1">
<div class="colt flex-3 flex-column ">
<p class="m-auto">some text standing here</p>
</div>
<div class="col flex-column">
<button class="flex-1">button 1</button>
<button class="flex-1">button 2</button>
<button class="flex-1">button 3</button>
</div>
</div>

Answer 2

You can do something like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row bg-secondary text-light" id="alert_box" style="max-width:516px;">
<div class="col-9" style="padding: 13px 6px 11px 33px;border-right: 1px solid #fff;">
What information do you want to see? We'd love to hear from you
</div>
<div class="col-3">
<div class="row">
<div class="col-12"style="border-bottom: 1px solid #fff;">
<button class="btn pull-right text-light">Button 1</button>
</div>
<div class="col-12">
<button class="btn pull-right text-light">Button 2</button>
</div>
</div>
</div>
Check this live example