How can you separately change positions of a text tag?

I've been trying to create some login text/button tab. When I try changing the position, it changes both the username and password tags. How can I make it so it changes only one? Because I don't want them at the same exact position. I've tried to make the tags have separate classes and move them, but it doesn't show them on-screen then. What I have currently done:

<div class="loginbox">
  <input type = "text" class = "userclass" name = "" placeholder = "Insert Username">
  <input type = "text" class = "passclass" name = "" placeholder = "Insert Password">
</div>

This is the HTML

.loginbox input[type="text"], input[type="password"]
  {
      right: 100%;
      border:none;
      border-bottom:ipx solid#fff;
      background: transparent;
      outline: none;
      color: #000;
      font-size: 16px;
      position: relative;
      right: 50px;
  }

This is the CSS