1行にラベルと入力を設定する方法は？

Question

こんにちは私は別のスタイルを持っています。 https://jsfiddle.net/mL1o0d5m/

CSSコードでロックしてください：

body{ 
    font-family: tahoma; 
    font-size:14px; 
    background-color:#f1f1f1; 
    color:#999; 
    direction:rtl; 
} 

.form{ 
    font-size:14px; 
    width:100%; 
} 

.form label{ 
    text-align: right; 
    clear: both; 
    float:right; 
} 

.form input.inputs{ 
    font-size:14px; 
    color:#999; 
    display:block; 
    border:1px solid #ccc; 
    border-right:none; 
    background-color:#fff; 
    width:80%; 
    margin-bottom:20px; 
    padding:10px; 
    padding-right:30px; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-shadow:none; 
    -webkit-appearance: none; 
} 

.addon{ 
    position:relative; 
    font-size:0; 
} 

.addon:before{ 
    display:block; 
    content:""; 
    width:3px; 
    height:100%; 
    background-color:#3399cc; 
    position:absolute; 
} 

.icon:before{ 
    font-size:14px; 
    color:#bbb; 
    position:absolute; 
    top:12px; 
    right:12px; 
} 

HTML：私は.LABELでなければなりません右と入力し、アイコンにする必要があり、同じ行にラベルと入力を設定したい

<form class="form"> 
<label>Name</label> 
    <div class="addon"> 
     <i class="icon fa fa-user"></i> 
     <input class="inputs" name="name" type="text" placeholder="Name" /> 
    </div> 



</form> 

左に。おかげさまで

Answer 1

このような？
https://jsfiddle.net/mL1o0d5m/1/
これはこれを達成するための多くの可能性の1つです。いくつかのCSSを追加しました
.form > label{ text-align: right; float:right; width:40px; margin-top:10px; }
さらには.icon：beforeと.addon：before
フィドルで表示