JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<ul>
    <li>
        <label for="name">名前</label>
        <div><input type="text" name="name"></div>
    </li>
    <li>
        <label for="email">Eメール</label>
        <div><input type="email" name="email"></div>
    </li>
    <li>
        <label for="address">住所</label>
        <div><input type="text" name="address"></div>
    </li>
</ul>

CSS

li {
    margin-bottom: 1px;
    
    display: box;
    display: -moz-box;
    display: -webkit-box;
    
    display: -webkit-flex;
	display: -moz-flex;
	display: flex;
    
    padding: 5px;
    border-bottom: 1px solid #dedede;
}
li label {
    display: block;
    width: 80px;
    text-align: right;
}
li label:after {
    content: ' :';
}
li > div {
    box-flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;

	-webkit-flex: 1;
	-moz-flex: 1;
	flex: 1;
    
    padding: 0 .5em;
}
li input[type="text"],
li input[type="email"] {
    background: lightyellow;
    border: 1px solid #cecece;
    -webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
li input:hover {
     background: purple;
}