Made this simple grid with inputs. On PC is everything ok, but on mobile version if I have long text, so input is under that text. But when I have short text like that Lor, then it is next to input...I need to jump that text over input and have 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>