Simple input form example

index.html

<div class="parent">
  <div class="child">
    <ul>
      <li>First<br>
        <input value="name"></input>
      </li>
      <li>Last<br>
        <input value="last name"></input>
      </li>
      <li>Email<br>
        <input value="email address"></input>
      </li>
    </ul>
  </div>
  <div class="child">
    <ul>
      <li>Phone<br>
        <input value="(xxx) xxx-xxxx"></input>
      </li>
      <li>Credit Card<br>
        <input value="####-####-####-####"></input>
      </li>
      <li>Address<br>
        <input value="blank at blank st."></input>
      </li>
    </ul>
  </div>
</div>

Simple input form example.markdown

Simple input form example

Made this as a demonstration on how common interface problems can be solved with both UX aaaand UI design

A Pen by Alex on CodePen.

License.

style.css

body {
  margin: 0;
  font-family: Verdana;
}

li {
  list-style:none;
  color:black;
  font-size:1.2em;
  border: 
}

input {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid black;
    width: 200px;
    height: 2em;
  font-size: .75em;
  color:#aeaeae;
  margin-bottom: 15px;
}

.parent {
  height: 80px;
  width: 100%;
  display: flex;
}

.child {
  flex-direction: horizontal;
}