CSS Use Grid and Flex at the same time - html

Question

I have a problem. CSS isn't my favorite part of coding and I can't figure this out. I need the following result:
But here is what I have now:
#newOrderControl {
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: 40px;
}
#newOrderInputFields .inputField {
display: flex;
align-items: center;
flex-direction: row;
}
#newOrderInputFields label {
width: auto;
}
#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;
}
<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>
<div>
<input type="text" id="txtOrderQuantity">
<button class="btnAll" onclick="setAllQuantity()">All</button>
</div>
</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>
</select>
</div>
<div class="inputField">
<label>Amount:</label>
<div>
<input type="text" id="txtOrderAmount">
<button class="btnAll" onclick="setAllAmount()">All</button>
</div>
</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>
With this code I currently have the following problems:
My All button isn't next to the input field
The 2 buttons below are outside the newOrderControl div
The labels are being wrapped to the next line
All inputs and labels need to be aligned below each other like a grid
Now I have tried to change it to a grid, but then I was struggling with the input and button that are next to each other. So I wrapped them in a div, but then they completely disappear.
What do I need to do to get the result?

Answer 1

(1) Removing the wrapper <div> in below code will automatically align the input and buttons by the power of flexbox.
<div>
<input type="text" id="txtOrderQuantity">
<button class="btnAll" onclick="setAllQuantity()">All</button>
</div>
(2) First rule: do not use float for layout.
I've added:
#newOrderControl {
display: flex;
flex-direction: column;
So that buttons can be aligned to the right with
#newOrderInputFields label {
width: auto;
}
(3) Applying flex-shrink: 0; will prevent the <label> from wrapping. I've changed the width of container to width: max-content; and reduced gap to compensate for it.
(4) added justify-content: flex-end; to align them:
#newOrderInputFields .inputField {
display: flex;
flex-direction: row;
justify-content: flex-end;
#newOrderControl {
display: flex;
align-items: center;
flex-direction: column;
border-style: solid;
border-color: black;
border-width: 1px;
width: max-content;
font-size: 14px;
}
#newOrderInputFields {
display: grid;
grid-template-columns: auto auto auto auto;
column-gap: 5px;
}
#newOrderInputFields .inputField {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
#newOrderInputFields label {
width: auto;
flex-shrink: 0;
}
#newOrderButtons {
align-self: flex-end;
}
#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;
}
<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>
</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>