flexbox, how to align a flex item next to another flex-item?

Question

I am making a simple calculator with flexbox. However, i want to have the operators next to numbers but i can't find a way to achieve this.

this is what i have in html

<div class="container">
  <div class="result">
    <input class="input-btn__result" name="" value="0">
  </div>
  <div class="btns">
    <div class="btns-top_operators">
      <input class="clear" type="button" name="" value="C">
      <input class="backspace" type="button" name="" value="<">
      <input class="input-btn__divide"class="input-btn" type="button" name="" value="/">
    </div>
    <div class="btn-numbers">
      <input class="input-btn" type="button" name="" value="1">
      <input class="input-btn" type="button" name="" value="2">
      <input class="input-btn" type="button" name="" value="3">
      <input class="input-btn" type="button" name="" value="4">
      <input class="input-btn" type="button" name="" value="5">
      <input class="input-btn" type="button" name="" value="6">
      <input class="input-btn" type="button" name="" value="7">
      <input class="input-btn" type="button" name="" value="8">
      <input class="input-btn" type="button" name="" value="9">
      <input class="input-btn" type="button" name="" value=".">
      <input class="input-btn" type="button" name="" value="0">
      <div class="operators-right">
        <input class="input-btn"  type="button" name="" value="*">
        <input class="input-btn"  type="button" name="" value="+">
        <input class="input-btn"  type="button" name="" value="-">
        <input class="input-btn"  type="button" name="" value="=">
      </div>
    </div>
  </div>
</div>

then in css (by the way the border's colors it's just to help to position and what i am targeting.)

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  border: 1px solid black;
  height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.input-btn__result {
  width: 250px;
  text-align: right;
}

.input-btn, .input-btn__result {
  padding: 10px;
}

.input-btn {
  width: 60px;
}

.input-btn__divide {
  width: 60px;
  padding: 10px;
}

.clear {
  padding: 10px;
  width: 90px;
}

.backspace {
  padding: 10px;
  width: 90px;
}

.btns {
  height: 250px;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid red;
}

.btns-top__operators {
  justify-content: center;
}


.btn-numbers {
  border: 1px solid green;
  height: 250px;
  width: 250px;
}
.operators-right {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}

Answer 1

Move your operators-right div out of btn-numbers and wrap them both in a flex box.

  <div style="display: flex; flex-flow: row nowrap;">
    <div class="btn-numbers">
      <input class="input-btn" type="button" name="" value="1">
      <input class="input-btn" type="button" name="" value="2">
      <input class="input-btn" type="button" name="" value="3">
      <input class="input-btn" type="button" name="" value="4">
      <input class="input-btn" type="button" name="" value="5">
      <input class="input-btn" type="button" name="" value="6">
      <input class="input-btn" type="button" name="" value="7">
      <input class="input-btn" type="button" name="" value="8">
      <input class="input-btn" type="button" name="" value="9">
      <input class="input-btn" type="button" name="" value=".">
      <input class="input-btn" type="button" name="" value="0">
    </div>
    <div class="operators-right">
      <input class="input-btn" type="button" name="" value="*">
      <input class="input-btn" type="button" name="" value="+">
      <input class="input-btn" type="button" name="" value="-">
      <input class="input-btn" type="button" name="" value="=">
    </div>
  </div>

I also updated CSS for btn-numbers to:

.btn-numbers {
  border: 1px solid green;
  width: 190px;
}