form input columns in same line: dont line break in Mobile view-CodePudding

i have 2 field: name and phone number.

In laptop, display same line but in Mobile view display 2 rows

How can 2 fields input (name and Phone) display same line in Mobile like Laptop?

My current code: https://jsfiddle.net/bvotcode/eLh36azt/4/

    <body>

<form action="/action_page.php" target="_blank">

<div  style="margin-top:0px">
<div >
<form action="/action_page.php" target="_blank">
<div  style="margin:0 -16px 8px -16px">
        
            <div >
              <input  type="text" placeholder="first last name" name ="hovaten" required/>
            </div>
            <div >
              <input  type="text" placeholder="phone number"  name="handynumber" required/>
            </div>
</div>
       <button  type="submit"> Submit</button>
</form>
</div>
</div>
</body>

Thank you

CodePudding user response：

label {
  display: block;
}

@media screen and (min-width: 769px) {
  .fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

<form action="/action_page.php">
  <div >
    <label>
    first last name
      <input  type="text" placeholder="first last name" name="hovaten" required/>
    </label>
    <label>
    Phone number
      <input type="text" placeholder="phone number" name="handynumber" required/>
    </label>
  </div>

  <button type="submit"> Submit</button>
</form>

CodePudding user response：

Try using this bootstrap code:

<div >
<div >
  <input type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div >             
  <input type="text" placeholder="phone number"  name="handynumber" required/>
</div>
</div>