Css 如何在一行中设置标签和输入？

嗨，我有一个不同的风格，因为betwin标签和输入设置图标。请把门锁上

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:

<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>

名称

我想设置标签和输入在同一行。标签应该在右边，输入和图标必须在左边。 谢谢。

像这样吗

这是实现这一目标的众多可能性之一。添加了一些css

.form>标签{
文本对齐：右对齐；
浮动：对；
宽度：40px；
边缘顶部：10px；
}

还有to.icon:before和.addon:before
像这样在fiddle中看到吗

这是实现这一目标的众多可能性之一。添加了一些css

.form>标签{
文本对齐：右对齐；
浮动：对；
宽度：40px；
边缘顶部：10px；
}

以及to.icon:before和.addon:before
请参见fiddle