Polymer.js align iron-form elements horizontally

Question

I am trying to create a form using Polymer 2.0 using iron-form. I want to align two form elements in one row and the next two element in the next row and so on. But i cant figure what to use to achieve this.

Please see the code below.

<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                    <paper-input float-label label="First Name"></paper-input>
                    <paper-input float-label label="Last Name"></paper-input>
                    <paper-input float-label label="Address"></paper-input>
                    <paper-input float-label label="State"></paper-input>
                    <paper-input float-label label="Country"></paper-input>
                    <paper-input float-label label="PIN"></paper-input>
                    <paper-input float-label label="Phone (Mobile)"></paper-input>
                    <paper-input float-label label="Phone (Office)"></paper-input>
                    <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
        </div>

Help much appreciated.

Answer 1

Wrap <paper-item></paper-item> each <paper-input></paper-input> that you like to use at same row, also add padding to make space. ie:

<style>
   paper-input {padding-left:10px }
</style>

<div class="card">
            <iron-form id="form3">
                <form action="" method="get">
                   <paper-item>
                      <paper-input float-label label="First Name"></paper-input>
                      <paper-input float-label label="Last Name"></paper-input>
                    </paper-item>
                    <paper-item>
                      <paper-input float-label label="Address"></paper-input>
                      <paper-input float-label label="State"></paper-input>
                    </paper-item>
                    <paper-item>
                      <paper-input float-label label="Country"></paper-input>
                      <paper-input float-label label="PIN"></paper-input>
                    <paper-input float-label label="Phone (Mobile)"></paper-input>
                    </paper-item>
                      <paper-input float-label label="Phone (Office)"></paper-input>
                      <paper-button raised class="indigo">Submit</paper-button>
                </form>
            </iron-form>
</div>

Answer 2

Wrap two paper input elements into div and apply style as shown below.

 <style>
      div{
       @apply --layout-horizontal;
       @apply --layout-flex;
     }
   </style>

   <div>
    <paper-input float-label label="First Name"></paper-input>
    <paper-input float-label label="Last Name"></paper-input>
   <div>

Answer 3

Thank you so much for all the response. I finally decided to use granite-bootstrap-grid from granite-bootstrap component.

As i am very much used to bootstrap, this helped me to use the same bootstrap classes to get the responsive nature within polymer application.

please find the link below.

https://www.webcomponents.org/element/LostInBrittany/granite-bootstrap