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

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 class="w3-center w3-padding-16" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
        
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
            </div>
            <div class="w3-half">
              <input class="w3-input w3-border" type="text" placeholder="phone number"  name="handynumber" required/>
            </div>
</div>
       <button class="w3-button w3-green w3-section w3-center" type="submit"> Submit</button>
</form>
</div>
</div>
</body>

Thank you

Solution

The main part of your example could be:

    <div class="w3-row">
          <div class="w3-col" style="width:50%;padding:2px">
            <input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
          </div>
        <div class="w3-col" style="width:50%;padding:2px">
          <input class="w3-input w3-border" type="text" placeholder="phone number"  name="handynumber" required/>
        </div>
    </div>

In this way, each field will always be half the width of the screen.

Saludos,