Created a basic grid layout with input fields. Everything looks fine on the PC, but on mobile devices, long text causes the input field to be positioned below the text. However, when the text is short like Lor, it appears next to the input field... I want the text to go over the input and maintain the same structure.
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 1100px;
max-width: 100%;
height: 200px;
margin: 0 auto;
}
input {
border: none;
border-bottom: 1px solid #000;
width: 250px;
}
p{
font-weight: bold;
text-align: right;
}
h4{
background-color: #ecf0f1;
padding: .5rem;
}
@media (max-width: 500px) {
.container{
display: grid;
grid-template-columns: 1fr;
}
p{
text-align: center;
}
input {
padding-left: 2rem;
}<div class="container">
<div class="one">
<h4>Heading</h4>
<p>Lorem ipsum lorem ipsum<input type="text" value="[[Lorem]]"></p>
<p>Lorem ipsum lorem ipsum<input type="text" value="[[Lorem]]"></p>
<p>Lor<input type="text" value="[[Lorem]]"></p>
</div>
<div class="two"></div>
<div class="one">
<h4>Heading</h4>
<p>Lorem ipsum lorem ipsum<input type="text" value="[[Lorem]]"></p>
<p>Lorem ipsum lorem ipsum<input type="text" value="[[Lorem]]"></p>
<p>Lor<input type="text" value="[[Lorem]]"></p>
</div>
<div class="two"></div>
</div>
</div>