I have a problem. I created the following page:

```css
#newOrderControl {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    width: min-content;
    font-size: 14px;
  }

  #newOrderInputFields {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 20px;
    padding-bottom: 20px;
  }

  #newOrderInputFields .inputField {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  #newOrderInputFields label {
    flex-shrink: 0;
  }

  #newOrderButtons {
    align-self: flex-end;
    padding-bottom: 20px;
  }

  #newOrderButtons button {
    float: right;
    border-style: solid;
    border-color: black;
    border-width: 2px;
    color: white;
    height: 30px;
    width: auto;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    border-radius: 10px;
    margin: 0px 5px;
  }

  .btnAll {
    background-color: #6DA0ED;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    color: white;
    border-radius: 5px;
  }

  #btnTakeProfit {
    background-color: #33AB37;
  }

  #btnPlaceOrder {
    background-color: #6DA0ED;
  }

  .title {
    display: block;
    text-align: center;
    color: #1D0F73;
    font-size: 22px;
    font-weight: bold;
    margin: 5px;
}
```

```html
<div id="newOrderControl">
<label class="title">New order</label>
<div id="newOrderInputFields">
    <div class="inputField">
    <label>Action:</label>
    <select id="txtOrderAction">
        <option value="">-</option>
        <option value="Buy">Buy</option>
        <option value="Sell">Sell</option>
    </select>
    </div>
    <div class="inputField">
    <label>Quantity:</label>
    <input type="text" id="txtOrderQuantity">
    <button class="btnAll" onclick="setAllQuantity()">All</button>
    </div>
    <div class="inputField">
    <label>Target price:</label>
    <input type="text" id="txtOrderTargetPrice">
    </div>
    <div class="inputField">
    <label>Target perc:</label>
    <input type="text" id="txtOrderTargetPerc">
    </div>
    <div class="inputField">
    <label>Coin:</label>
    <select id="txtOrderCoin">
        <option value="">-</option>
        <option value="">SPTF</option>
        <option value="">TLS</option>
    </select>
    </div>
    <div class="inputField">
    <label>Amount:</label>
    <input type="text" id="txtOrderAmount">
    <button class="btnAll" onclick="setAllAmount()">All</button>
    </div>
    <div class="inputField">
    <label>Limit price:</label>
    <input type="text" id="txtOrderLimitPrice">
    </div>
    <div class="inputField">
    <label>Limit perc:</label>
    <input type="text" id="txtOrderLimitPerc">
    </div>
</div>
<div id="newOrderButtons">
    <button id="btnTakeProfit">Take profit</button>
    <button id="btnPlaceOrder">Place order</button>
</div>
</div>
```

Now with this code I have a few problems:

* The 2 selects (action and coin) don't have an equal width, so they are not aligned perfectly
* When I resize my page everything goes trough each other

I thought I could fix it by setting `width: min-content;` in `#newOrderControl`, but that crops everything trough each other:
[![enter image description here](https://i.stack.imgur.com/noBMG.png)](https://i.stack.imgur.com/noBMG.png)

So I tried setting it to auto, but then it uses the entire page:
[![enter image description here](https://i.stack.imgur.com/qirA5.png)](https://i.stack.imgur.com/qirA5.png)

How can I keep the positions while resizing the page and give the `#newOrderControl` the width it needs to place everything, without using the entire page?