https://i.sstatic.net/tki2N.png
https://i.sstatic.net/4tJE0.png
To view the complete code, visit http://codepen.io/anon/pen/BjqxOq
I have implemented a login page using materializecss and I am looking to align an image with the login form. However, when I attempt to do so, the image and the form appear stacked on top of each other as shown in the screenshot.
I tried adding a class="right align" to the image to move it to the right side, but I couldn't align the login form to be in line with the image.
<div>
<img src="images/one.png" height="480" width="580">
</div>
<div id="login-page" class="row">
<div class="col s12 z-depth-6 card-panel">
<form class="login-form">
<div class="row">
<div class="input-field col s12 center">
<h3 class="left login-form-text">Login</h3>
</div>
</div>
<div class="row margin">
<div class="input-field col s4">
<i class="mdi-social-person-outline prefix"></i>
<input class="validate" id="email" type="email" >
<label for="email" data-error="wrong" data-success="right" class="center-align">Email</label>
</div>
</div>
<div class="row margin">
<div class="input-field col s4">
<i class="mdi-action-lock-outline prefix"></i>
<input id="password" type="password" >
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 m12 l12 login-text">
<input type="checkbox" id="remember-me" />
<label for="remember-me">Remember me</label>
</div>
</div>
<div class="row">
<div class="input-field col s1">
<a href="" class="btn waves-effect waves-light grey darken-2 col s12">Login</a>
</div>
</div>
</div>