title: How to align the ion input text with some other element on the side
body: <p>I am developing a project and I came across a problem where the ion-input text including placeholder text are a little above the text beside it. I need help aligning them. </p>
  
  <p>This is my code.</p>
  
  <pre><code>  &lt;ion-item&gt;
    &lt;h4 item-left&gt; UserName: &lt;/h4&gt;
    &lt;ion-input placeholder="UserName" class="ion-padding"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  
    &lt;ion-item&gt;
    &lt;h4 item-left&gt; Profile picture: &lt;/h4&gt;
    &lt;ion-input placeholder="Profile picture" class="input"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  
    &lt;ion-item&gt;
    &lt;h4&gt; E-mail: &lt;/h4&gt;
    &lt;ion-input placeholder= "Email" inputmode="email"type="email" class="input"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  </code></pre>
  
  <p>This is the output:</p>
  
  <p><a href="https://i.stack.imgur.com/iqnHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iqnHQ.png" alt="code output"></a></p>