I'm trying to use CSS grid to position div tags and input fields within them. The piece that keeps failing is the vertical-alignment. I have tried many suggestions made in the online forums but nothing works. It's important for me to align the input fields towards the bottom of a div tag. I would greatly appreciate any help.
I have tried vertical-align="bottom" within the immediate div in which input is included and also with the input tag itself.
I have tried using position="absolute" with bottom="0".
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: [open-paren] 0.5fr [atomic-symbol]1.0fr;
width: 25%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
background-color: teal;
border-radius: 5px;
border: 3px solid teal;
height: 100px;
vertical-align: bottom;
}
.item:nth-child(1) {
grid-row: 1/5;
grid-column: open-paren;
text-align: right;
}
.item:nth-child(2) {
grid-row: 4/9;
grid-column: atomic-symbol;
}
</style>
</head>
<body>
<section class="container">
<div class="item">
<p vertical-align="text-bottom">Open</p>
</div>
<div class="item">
<input type="text" vertical-align="bottom">
</div>
</section>
</body>
</html>
Any element included inside a div tag aligned closet to the bottom of it.
I do not know if I understood correctly but this is positioning the input down the div.
* {
padding: 0;
margin: 0;
}
body {
font-family: helvetica;
font-size: 36px;
color: white;
}
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: 0.5fr 1fr;
width: 50%;
padding: 3px;
border: 3px solid teal;
border-radius: 5px;
}
.item {
display: grid;
align-items: end;
height: 100px;
border-radius: 5px;
border: 3px solid teal;
background-color: teal;
}
.item p {
text-align: right;
}
<section class="container">
<div class="item">
<p>Open</p>
</div>
<div class="item">
<input type="text">
</div>
</section>