How can i achieve this layout using css? [Without Grid]

Question

I have below layout.

When i am making the screen size smaller, the blue box is going to next line. But its position is right below where the red box ended. Currently, I am having trouble positioning the blue box to start position. How can i achieve this without using Grid ->

Here's my html and css -

  <div class="order-confirmation">
    <div class="confirmation-body-area">
      <div class="box box-1">Box 1</div>
      <div class="box box-2">Box 2</div>
      <div class="box box-3">Box 3</div>
    </div>
  </div>

.order-confirmation {
    .confirmation-body-area {
      width: 90%;
      margin: auto;
      .box {
        display: inline-block;
      }
      .box-1 {
        background: red;
        height: 214px;
        width: 631px;
        float: left;
      }
      .box-2 {
        background: blue;
        height: 214px;
        width: 427px;
        float: right;
      }
      .box-3 {
        background: yellow;
        height: 214px;
        width: 631px;
        clear: both;
      }
    }
  }

Answer 1

It is aligning to end of first because of float. Try removing float for box 1 and box 2