title: Checkout Form Width On Mobile
body: <p>I want to achieve this style of checkout <a href="https://www.honeyglow.store/checkout/detail" rel="nofollow noreferrer">enter link description here</a> where on mobile, I can get 50% width for one field (let say first name) and 50% width (last name). I have achieve this on desktop where I use <code>form-row-first</code>and<code>form-row-last</code> where i put this on my function.php.</p>
  
  <p>But it seems, the field is not side-by-side. The second field just goes below the first field. I'll share my CSS for both field here, which is:</p>
  
  <p>1) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.fl-wrap.fl-wrap-input #billing_first_name {
   display: inline-block;
   width: 50%;</code></pre>
  </div>
  </div>
  </p>
  
  <p>2) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.fl-wrap.fl-wrap-input #billing_last_name {
   display: inline-block;
   width: 50%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I attached the picture from my website (the problem) :<a href="https://i.stack.imgur.com/H550l.jpg" rel="nofollow noreferrer">My Site</a>
  And I want to achieve like this site : <a href="https://i.stack.imgur.com/J1fAE.jpg" rel="nofollow noreferrer">Competitor Site</a></p>
  
  <p>Maybe I select the wrong <code>div</code> or <code>label</code>. Anyone here can guide me? Would appreciate if anyone can contribute to this. Been 2 days since I tinkering it alone.</p>
  
  <p>If you guys need to test the website, just use this test product link => <a href="https://saradesign.my/product/test-product/" rel="nofollow noreferrer">Test Product Link</a></p>