Flexbox display:flex

HTML

<div class="boxes">

    <div class="box" id="one">
        <div class="area">Drop Area One
          <div class="widget">Widget</div>
        </div>
    </div>
    
    <div class="box" id="two">
        <div class="area">Drop Area Two
            <div class="widget">Widget</div>
            <div class="widget">Widget</div>
            <div class="widget">Widget</div>
        </div>
        <div class="area">Drop Area Three
          <div class="widget">Widget</div>
      </div>
    </div>
    
</div>

CSS

.boxes {
    display: flex;
}

.boxes .box {
    color: white;
    position: relative;
}

.area {
    box-sizing: border-box;
    padding: 10px;
}

.widget {
    border: 1px solid black;
    height: 50px;
    text-align: center;
}

#one {
    background-color: orange;
    order: 1;
    flex: 1 auto;
}

#one .area {
    background-color: purple;
    height: 100%;
}

#two {
    background-color: green;
    flex: 3 auto;
    order: 2;
}

#two .area {
    background-color: red;
}