Как оформить оповещение с двумя призывами к действиям

Question

Я пытаюсь создать оповещение, используя html и css, чтобы оно выглядело так, как показано ниже

Я смог чтобы создать это используя inline CSS, и это не тот желаемый вид, на который я надеялся.

Что лучше всего настроить мой текущий код, чтобы получить вид примера? На данный момент я использую два отдельных элемента div и настраиваю поля.

<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

Если вы не используете bootstrap, то здесь вам может помочь flex или grid:

пример сгибания, оба столбца будут растягиваться, чтобы соответствовать наибольшему:

.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

Вы можете сделать что-то вроде этого:

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

Проверить это в прямом эфире пример