Text in grid need to place over input in mobile

Question

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>

Answer 1

Try white-space CSS property as shown below:

    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;
    white-space: pre-line;
  }
  h4{
    background-color: #ecf0f1;
    padding: .5rem;
  }
  @media (max-width: 500px) {
    .container{
      display: grid;
      grid-template-columns: 1fr;
      
    } 
    p{
      text-align: center;
    white-space: pre-line;
    }
    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>