Я пытаюсь сделать кнопки рядом друг с другом в вертикальной Flex DIV

Question

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

Как вы можете видеть в следующем HTML, я попытался применить направление изгиба строки только к классу .buttons, но это не устранило мою проблему. Что я тут не так делаю?

.body {
  background-image: url(https://media.giphy.com/media/dQtH57ix3NWDKOQeQM/giphy.gif);
  width: 480px;
  height: 270px;
  float: left;
  border-radius: 20px;
}

.fill {
  background-color: #00000d;
  width: 480px;
  height: 270px;
  border-radius: 20px;
  opacity: .8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.proxies {
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  margin-bottom: auto;
  margin-top: 35px;
  color: yellow;
  background-color: #00000d;
  border-color: yellow;
  border-width: 3px;
  outline: none;
  text-align: center;
  resize: none;
}

.buttons {
  margin-bottom: auto;
  flex-direction: row;
}

.close {
  color: yellow;
  background-color: transparent;
  font-family: calibri;
  border-radius: 10px;
  border-color: yellow;
  outline: none;
}

.add {
  color: yellow;
  background-color: transparent;
  font-family: calibri;
  border-radius: 10px;
  border-color: yellow;
  outline: none;
}

<script src="https://kit.fontawesome.com/5276b58f35.js" crossorigin="anonymous"></script>

<right class="body">
  <div class="fill">
    <textarea class="proxies" name="proxies" id="proxies" cols="30" rows="10" placeholder="ip:port:name:pass"></textarea>
    <div class="buttons"></div>
    <button class="close">Close</button>
    <button class="add">Add Proxies</button>
  </div>
  </div>
</right>

Answer 1

Просто поместите кнопки в их собственный div и у вас должно быть это

 <right class="body">
      <div class="fill">
        <textarea class="proxies" name="proxies" id="proxies" cols="30" rows="10" placeholder="ip:port:name:pass"></textarea>
        <div class="buttons"></div>
        <div class="buttons">
          <button class="close">Close</button>
          <button class="add">Add Proxies</button>
        </div>
      </div>
      </div>
    </right>

css для пробелов

.close {
  color: yellow;
  background-color: transparent;
  font-family: calibri;
  border-radius: 10px;
  border-color: yellow;
  outline: none;
  margin-right: 1rem;
}