title: An Issue with ion-item tag
body: <p>I am working on a Login page where the user chooses the country code then enters his phone number.
  The two input fields (code, phone number) are in one line together</p>
  
  <p>The Problem I have is that when I use the ion-item it divide the width between the two input fields equally even if I change the width in the .scss file</p>
  
  <p>I have been in this problem for 2 days and can't get it yet.</p>
  
  <p>Here is my .scss file</p>
  
  <pre><code>ion-item{
      margin-top:170px;
      width: 100%;
  }
  
  
  .countryCode{
      width:20%;
      margin-right: 3px;
      border:none;
      border-bottom: 1px solid grey;
      background-color: rgba(255,255,255,0.0);
  }
  
  .phoneNumber{
      width: 50%;
      margin-left: 3px;
      border: none;
      border-bottom: 1px solid grey;
      background-color: rgba(255,255,255,0.0);
  }
  </code></pre>
  
  <p>and here is my HTML file ion item tag</p>
  
  <pre><code>&lt;ion-list&gt;
  &lt;ion-item&gt;
  
    &lt;ion-input class="countryCode" type="text" [(ngModel)]="countryCode" name="code" (tap)="openCountriescodePage()" placeholder="+"&gt;{{countryCode}}&lt;/ion-input&gt;
    &lt;ion-input class="phoneNumber" type="text" [(ngModel)]="phoneNumber" name="phoneNumber"&gt;&lt;/ion-input&gt;
  
  &lt;/ion-item&gt;
  
  &lt;button margin-top ion-button full color="success" (click)="login()"&gt;{{'login' | translate}}&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks in advance :)</p>