title: Customizing checkout fields on 2 columns in Woocommerce cart page
body: <p>After the new WooCommerce update checkout fields columns are acting strangely. That are my checkout fields customizations:</p>
  
  <pre><code>add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
  
  function custom_override_checkout_fields( $fields ) {
  unset($fields['billing']['billing_address_2']);
      return $fields;
  }
  
  // Checkout placeholder
  add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );
  function override_billing_checkout_fields( $fields ) {
      $fields['billing']['billing_phone']['placeholder'] = 'Telefon';
      $fields['billing']['billing_email']['placeholder'] = 'Email';
      $fields['billing']['billing_company']['placeholder'] = 'Firmanavn';
      return $fields;
  }
  
  add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
  function override_default_address_checkout_fields( $address_fields ) {
      $address_fields['first_name']['placeholder'] = 'Fornavn';
      $address_fields['last_name']['placeholder'] = 'Efternavn';
      $address_fields['address_1']['placeholder'] = 'Adresse';
      $address_fields['state']['placeholder'] = 'Stat';
      $address_fields['postcode']['placeholder'] = 'Postnummer';
      $address_fields['city']['placeholder'] = 'By';
      return $address_fields;
  }
  </code></pre>
  
  <p>I have set that checkout fields in a custom cart page visible <a href="https://detitalienskekoekken.dk/kasse/" rel="nofollow noreferrer"><strong>here</strong></a>.</p>
  
  <hr>
  
  <p><strong>My question:</strong> With php or with CSS styling, is there a way to have:</p>
  
  <ul>
  <li>firstname and lastname fields in 2 columns next to each other;</li>
  <li>Address 1 field full width at 100% <em>(I have unset address 2 field)</em>;</li>
  <li>State field full width at 100%;</li>
  <li>zip code and city fields in 2 columns next to each other;</li>
  <li>phone and email fields in 2 columns next to each other.</li>
  </ul>
  
  <p>I tried this CSS, but it just makes 100% for everything. How do I target just these above?</p>
  
  <pre class="lang-css prettyprint-override"><code>p.form-row-first, p.form-row-last {
      width: 100%;
      float: left;
  }
  </code></pre>