Inputs & buttons remains centered inside a child div - html

Question

I have a parent div with 3 child divs inside. I need that each child div take one third of the screen and that all elements (text, button and input) inside of each divs are responsive by always being to the center of the child divs.
I could make in sort that each child divs takes one third of the screen but the elements aren't responsive and are diving themselves in two columns inside the child divs, like seen in the picture below:
Here is the code used:
input,
select,
textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
.Order_Create_Ship_Stock>div {
width: 30%;
margin: 5px;
padding: auto;
display: inline-table;
border: solid;
}
.Order_Create,
.Order_Ship,
.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
display: table-cell;
}
#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
cursor: pointer;
display: flex;
flex-direction: column;
}
<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
<div id="OrderCreate" class="Order_Create">
<form onsubmit="App.createOrder(); return false">
<label for="BarcodeInput">
<span>Barcode</span>
<input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
</label>
<label for="OwnerInput">
<span>Owner</span>
<input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
</label>
<label for="ProductListInput">
<span>Product list</span>
<input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
</label>
<label for="ExpirationDateInput">
<span>Expiration date</span>
<input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
</label>
<label for="TemperatureMinimalInput">
<span>Temperature minimal</span>
<input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
</label>
<label for="TemperatureMaximalInput">
<span>Temperature maximal</span>
<input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<label for="FinalDestinationInput">
<span>Final destination</span>
<input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
</label>
<button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
</form>
</div>
<div id="OrderShip" class="Order_Ship">
<form onsubmit="App.ShipOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
</select>
</label>
<label for="AnticipatedDateInput">
<span>Anticipated date</span>
<input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
</label>
<label for="DestinationInput">
<span>Destination</span>
<input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
</label>
<button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
</form>
</div>
<div id="OrderStore" class="Order_Store">
<form onsubmit="App.storeOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
</form>
</div>
</div>
While I was working I could somehow make in sort that the buttons remains in one column by using flexbox (flex-direction: column), but this method didn't work for the inputs and textarea...
So I would like to ask some help to make in sort that all elements inside these child divs remain in only one column please.
I thank in advance anybody who will take the time to help me.

Answer 1

For the buttons, adding margin: auto, centered any child will do the job and I add one more option to the first Button if you find useful to make it a full button.
Also for the container to be responsive, you can to set the parent the flex box. Then set all child with flex: 1 and use media queries to make it columns.
/* --- FOR THE CONTAINERS --- */
#OrderCreateShipStock {
display: flex;
}
.Order_Create_Ship_Stock>div {
margin: 5px;
border: solid;
flex: 1;
}
#media only screen and (max-width: 800px) {
#OrderCreateShipStock {
flex-wrap: wrap;
flex-direction: column;
}
}
/* --- BUTTON CENTERED --- */
#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
display: flex;
margin: auto;
}
/* --- BUTTON FULL CENTERED TEXT --- */
#SubmitCreateOrder, #SubmitShipOrder, #SubmitStoreOrder {
width: 100%;
justify-content: center;
align-items: center;
}
input,
select,
textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
#OrderCreateShipStock {
display: flex;
}
.Order_Create_Ship_Stock>div {
margin: 5px;
border: solid;
flex: 1;
}
.Order_Create,
.Order_Ship,
.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
display: table-cell;
}
#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
display: flex;
margin: auto;
}
#SubmitCreateOrder {
width: 100%;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 500px) {
#OrderCreateShipStock {
flex-wrap: wrap;
flex-direction: column;
}
}
<div id="OrderCreateShipStock" class="Order_Create_Ship_Stock">
<div id="OrderCreate" class="Order_Create">
<form onsubmit="App.createOrder(); return false">
<label for="BarcodeInput">
<span>Barcode</span>
<input name="BarcodeInput"id="Barcode" class="Barcorde" type="text" placeholder="Order's Barcode...">
</label>
<label for="OwnerInput">
<span>Owner</span>
<input name="OwnerInput" id="Owner" class="Owner" type="text" placeholder="Owner of the product...">
</label>
<label for="ProductListInput">
<span>Product list</span>
<input name="ProductListInput" id="ProductList" class="Product_List" type="text" placeholder="Product list of the order....">
</label>
<label for="ExpirationDateInput">
<span>Expiration date</span>
<input name="ExpirationDateInput" id="ExpirationDate" class="Expiration_Date" type="date">
</label>
<label for="TemperatureMinimalInput">
<span>Temperature minimal</span>
<input name="TemperatureMinimalInput" id="TemperatureMinimal" class="Temperature_Minimal" type="number" placeholder="Minimal temperature of order's environment...">
</label>
<label for="TemperatureMaximalInput">
<span>Temperature maximal</span>
<input name="TemperatureMaximalInput" id="TemperatureMaximal" class="Temperature_Maximal" type="number" placeholder="Maximal temperature of order's environment...">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<label for="FinalDestinationInput">
<span>Final destination</span>
<input name="FinalDestinationInput" id="FinalDestination" class="Final_Destination" type="text" placeholder="Order's final destination...">
</label>
<button id="SubmitCreateOrder" class="Submit_Create_Order" type="submit">Create Order</button>
</form>
</div>
<div id="OrderShip" class="Order_Ship">
<form onsubmit="App.ShipOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
</select>
</label>
<label for="AnticipatedDateInput">
<span>Anticipated date</span>
<input name="AnticipatedDateInput" id="AnticipatedDate" class="Anticipated_Date" type="date">
</label>
<label for="DestinationInput">
<span>Destination</span>
<input name="DestinationInput" id="Destination" class="Destination_" type="text" placeholder="Order's destination">
</label>
<button id="SubmitShipOrder" class="Submit_Ship_Order" type="submit">Ship Order</button>
</form>
</div>
<div id="OrderStore" class="Order_Store">
<form onsubmit="App.storeOrder(); return false">
<label for="OrderIDInput">
<span>OrderID</span>
<input name="OrderIDInput" id="OrderID" class="Order_ID" type="text" placeholder="Order's ID">
</label>
<label for="ActualLocationInput">
<span>Actual location</span>
<input name="ActualLocationInput" id="ActualLocation" class="Actual_Location_Input" type="text" placeholder="Order's actual location">
</label>
<label for="ActualTemperatureInput">
<span>Actual temperature</span>
<input name="ActualTemperatureInput" id="ActualTemperature" class="Actual_Temperature" type="text" placeholder="Order's actual environment temperature">
</label>
<label for="CurrentCounterpartyInput">
<span>Counterparty</span>
<input name="CurrentCounterpartyInput" id="CurrentCounterparty" class="Current_Counterparty" type="text" placeholder="Order's current counterparty">
</label>
<label for="IOTDeviceInput">
<span>IOT Device</span>
<select name="IOTDeviceInput" id="IOTDevice" class="IOT_Device_Input">
<option value="">---Please select an IOT Device---</option>
</select>
</label>
<button id="SubmitStoreOrder" class="Submit_Store_Order" type="submit">Store Order</button>
</form>
</div>
</div>

Answer 2

Just found the error, I just needed to add to label and not input, select the following:
display: flex;
flex-direction: column;