Button inside child divs at the same position - html

Question

I have 3 childs divs with each possessing a button element inside like showed by the following picture:
Code:
body {
background-color: white;
}
input,
select,
textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: flex;
flex-direction: column;
}
.Order_Create_Ship_Stock>div {
display: table-cell;
width: 10%;
margin: 5px;
border: solid;
}
.Order_Create_Ship_Stock {
display: inline-table;
border-spacing: 10px;
}
.Order_Create,
.Order_Ship,
.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 10px;
}
#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: black;
border: 2px solid #4caf50;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
display: flex;
flex-direction: column;
margin: auto;
}
#SubmitCreateOrder:hover {
background-color: #4caf50;
color: white;
}
#SubmitShipOrder:hover {
background-color: #4caf50;
color: white;
}
#SubmitStoreOrder:hover {
background-color: #4caf50;
color: white;
}
<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>
<!-- Your Stuff -->
<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>
I basically want that the Ship Order and Store Order button are positioned at the same height. I followed the advice from some other posts like using justify-content: flex-end, but they didn't work...
I thank in advance anybody who will help me :).

Answer 1

It's probably not the best solution, but working.
So you can play a bit with it.
I added
.Order_Create,
.Order_Ship,
.Order_Store {
...
padding: 20px 10px;
position:relative;
}
and
#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
...
margin: auto;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
body {
background-color: white;
}
input,
select,
textarea {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
padding: 12px 12px 12px 0;
display: flex;
flex-direction: column;
}
.Order_Create_Ship_Stock>div {
display: table-cell;
width: 10%;
margin: 5px;
border: solid;
}
.Order_Create_Ship_Stock {
display: inline-table;
border-spacing: 10px;
}
.Order_Create,
.Order_Ship,
.Order_Store {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 10px;
position:relative;
}
#SubmitCreateOrder,
#SubmitShipOrder,
#SubmitStoreOrder {
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color: black;
border: 2px solid #4caf50;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
margin: auto;
position: absolute;
bottom: 5px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#SubmitCreateOrder:hover {
background-color: #4caf50;
color: white;
}
#SubmitShipOrder:hover {
background-color: #4caf50;
color: white;
}
#SubmitStoreOrder:hover {
background-color: #4caf50;
color: white;
}
<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>
<!-- Your Stuff -->
<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>