Below is some Bootstrap 5 markup that I need help with.
The first example is incorrect. I don't want the Bootstrap input to be the same height as the grid cell.
The second example is right, but I want to achieve the same result without using a wrapper div. Is there any alternative way to do this?
PS: I am intentionally avoiding the Bootstrap grid system and instead looking to utilize CSS grid.
.my-grid {
display: grid;
grid-template-columns: auto 1fr;
}
.grid-cell {
width: 20px;
background-color: red;
height: 80px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e5548554a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<h4>This is wrong</h4>
<div class="my-grid">
<div class="grid-cell"></div>
<input class="form-control">
</div>
<hr>
<h4>This is correct but I do not want a wrapper div</h4>
<div class="my-grid">
<div class="grid-cell"></div>
<div class="I-DONT-WANT-THIS-WRAPPER-DIV">
<input class="form-control">
<div>
</div>