MaterializeCSS - aligning button and input field

Question

With materializeCSS I'm trying to place a button and a input field one near to the other (similar to default file input) as shown in the image below.

But I have an hard time achieving it because the input field label is above the button or the field is below the button.

 <div class="row">
    <div class="col s12 m4 l3">
      <div class="file-field input-field">
        <button class="waves-effect waves-light btn-large" type="submit" name="action">Button
        </button>
        <div class="file-path-wrapper">
          <input id="email_input" type="text">
          <label for="email_input">email</label>
        </div>
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/rxKbZz

Is there a way to achieve it?

THANK YOU

Solution 1

In 2017 Align input text and button on its right code:

<div class="row">
   <form class="col s12">
       <div class="row">
           <div class="input-field col s6">
               <input id="name" type="text" class="validate">
               <label for="name">Name</label>
           </div>
           <div class="input-field col s6">
               <button class="btn waves-effect waves-light" type="submit" name="action">Go!
               </button>
           </div>
       </div>
   </form>
</div>

JSFiddle here

Hope it works!

Solution 2

just add the "input-field" class to your inputs and button containers

Solution 3

This worked for me:

<div class="input-field inline" style="calc(100% - 100px)">
    <label>Código de Barras</label>
    <input type="text" placeholder="">
</div>
<a class="btn waves-effect waves-light indigo right">
     <i class="material-icons">camera_alt</i>
</a>

Comments

[landru27]

please reformat your answer for readability, and please remove one of your two answers on this question

[Vega]

Not much different from David Corral's answer, isn't it?