ブートストラップのような入力グループを作成するのにFlexを使用しない場合はどうすればよいですか？

Question

入力グループをブートストラップのように一から作成したいのですが、Flexを使用したくないので、入力グループを作成する最も良い方法は何ですか？私は、例えば

...ブートストラップの古いバージョンがdisplay: tableを使用しているが、私はSafariのようないくつかのブラウザでは別の方法で動作しますので、それが最善の方法ではありません聞いたことがあると思う：

<div class="iptGroup"> 
    <span>@</span> 
    <input type="text"></input> 
</div> 

私はこのコードを持っていたし、 display: table使用されるが、どちらも私はNOTH参照どれでも答えが高く評価され

...

Answer 1

... -webkit-のブラウザで働いていた（spanの幅でいくつかの問題）、またはFirefoxで働いていましたdisplay: table;とtable-cellを使用して悪いINGの：

/*QuickReset*/ 
 
*{margin:0;box-sizing:border-box;} 
 
html,body{height:100%;font:14px/1.4 sans-serif;} 
 
input, textarea{font:14px/1.4 sans-serif;} 
 

 
.input-group{ 
 
    display: table; 
 
    border-collapse: collapse; 
 
    width:100%; 
 
} 
 
.input-group > div{ 
 
    display: table-cell; 
 
    border: 1px solid #ddd; 
 
    vertical-align: middle; /* needed for Safari */ 
 
} 
 
.input-group-icon{ 
 
    background:#eee; 
 
    color: #777; 
 
    padding: 0 12px 
 
} 
 
.input-group-area{ 
 
    width:100%; 
 
} 
 
.input-group input{ 
 
    border: 0; 
 
    display: block; 
 
    width: 100%; 
 
    padding: 8px; 
 
}

<div class="input-group"> 
 
    <div class="input-group-icon">@</div> 
 
    <div class="input-group-area"><input type="text" placeholder="Email Address"></div> 
 
</div> 
 
\t 
 
<div class="input-group"> 
 
    <div class="input-group-icon">Income:</div> 
 
    <div class="input-group-area"><input type="text" value="0.00"></div> 
 
    <div class="input-group-icon">$</div> 
 
</div>