Button not aligning properly

Question

I am making a rsvp form. I messed up the UI while adding a dropdown replacing the existing input field but it messed up my UI I have provided before after image for some understanding. I have added that dropdown from a website I am pretty sure its the thing which is messing with the UI.

In short I want the button accept and regret side by side and exactly at the bottom of the card.

Before:

After:

After adding flex: Does anyone has idea on how to fix this.

```
.main_card {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 15px;
  transform: translateY(-50%) translateX(-50%);
  background-color: #fff;
  box-shadow: 2px 2px 4px rgb(0, 0, 0, 0.25);
  transition: width 0.5s, height 0.5s;
  -webkit-transition: width 0.5s, height 0.5s;
  padding: 0px 0px;
}


/* This is for the button accept and regret-->button */

   #regret {
  display: flex;
}
button {
  color: #ffff;
  border: none;
  font-family: "Raleway";
  font-size: 18px;
  font-weight: 600;
  padding: 15px 32px;
  width: 200px;
  margin: 65px auto 0px auto;
  outline: none;
  cursor: pointer;
}
button.regret {
  border-bottom-left-radius: 15px;
  background-color: #d5adb3;
}
button.accept {
  border-bottom-right-radius: 15px;
  background-color: #c47c8e;
}
button:hover {
  background-color: #c2647b;
  transition: 0.5s;
}
#start:hover {
  background-color: #c2647b;
  transition: 0.5s;
}

/* This is nonveg or veg option */
.wrapper {
  height: 35px;
  width: 75%;
  display: inline-flex;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  border-radius: 5px;
}
.wrapper .option {
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot {
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before {
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"] {
  display: none;
}
#option-1:checked:checked~.option-1 {
  border-color: #92282c;
  background: #92282c;
}
#option-2:checked:checked~.option-2 {
  border-color: #00c200;
  background: #00c200;
}
#option-1:checked:checked~.option-1 .dot,
#option-2:checked:checked~.option-2 .dot {
  background: #fff;
}
#option-1:checked:checked~.option-1 .dot::before,
#option-2:checked:checked~.option-2 .dot::before {
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span {
  font-size: 15px;
  color: #808080;
}
#option-1:checked:checked~.option-1 span,
#option-2:checked:checked~.option-2 span {
  color: #fff;
}

/* This is where dropdown starts */
.select {
  position: relative;
  width: 75%;
  margin: 25px auto 20px;
  display: block;
}
.select svg {
  position: absolute;
  right: 12px;
  top: calc(50% - 3px);
  width: 10px;
  height: 6px;
  stroke-width: 2px;
  stroke: #9098a9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.select select {
  -webkit-appearance: none;
  padding: 7px 7px 7px 12px;
  width: 100%;
  border: 1px solid #e8eaed;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 3px -2px #9098a9;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  transition: all 150ms ease;
}
.select select:required:invalid {
  color: #5a667f;
}
.select select option {
  color: #223254;
}
.select select option[value=""][disabled] {
  display: none;
}
```

```
<div id="main" class="main_content" style="display: none">
  <div class="info">
    <h1 class="h1 text">RSVP</h1>
    <h2 class="h2 text">for the wedding of</h2>
    <h1 class="h1 cursive">Tippu and Ihsana</h1>
    <p class="line p">________________________________________</p>
    <h2 class="h2 text"><b>Date and Time</b></h2>
    <p class="p text">Thursday, October 21, 2021</p>
    <p class="p text">7:00 PM</p>
    <h2 class="h2 text">Nikkah followed by Dinner <br><b>Venue</b></h2>
    <p class="p text">New College Auditorium,</p>
    <p class="p text">Peters road, Royapettah, Chennai</p>
    <p class="line p">________________________________________</p>
    <input id="namefield" type="text" placeholder="Name" required>
    <label class="select" for="slct"><select id="slct" required="required">
          <option value="" disabled="disabled" selected="selected">Select option</option>
          <option value="1">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
          <option value="4">Four</option>
          <option value="5">Five</option>
          <option value="6">Six</option>
          <option value="More">More</option>
      </select><svg>
          <use xlink:href="#select-arrow-down"></use>
      </svg></label>
    <div class="wrapper">
      <input type="radio" name="select" id="option-1" value="non-veg">
      <input type="radio" name="select" id="option-2" value="veg">
      <label for="option-1" class="option option-1">
            <div class="dot"></div>
             <span>Non-Veg</span>
             </label>
      <label for="option-2" class="option option-2">
            <div class="dot"></div>
             <span>Veg</span>
          </label>
    </div>
    <div id="regret">
    <button class ="regret" onclick="Regret();">Regret</button>
   
    <button class ="accept" onclick="WriteData();">Accept</button>
  </div>

  </div>
</div>
<svg class="sprites">
  <symbol id="select-arrow-down" viewbox="0 0 10 6">
      <polyline points="1 1 5 5 9 1"></polyline>
  </symbol>
</svg>
```

Answer 1

The most basic way to align elements side by side would be to apply a float: left; // It's hard to find an exact solution to your question because it doesn't seem to be formatted the same in a code playground. However, what I would do in this situation is put both of the buttons "Regret" and "Accept" in their own separate call-to-action div & put some sort of flex or inline-flex associated with it. For example:

<div class="cta-buttons">
    <button class ="regret" onclick="Regret();">Regret</button>
    <button class ="accept" onclick="WriteData();">Accept</button>
</div>

.cta-buttons {
  display: flex;
 }
 
 <!-- You can also use an inline-flex -->
 
.cta-buttons {
  display: inline-flex;
 }