HTML入力と画像を同じ行に表示する方法

Question

HTML入力要素とsvg画像を同じ行に表示しようとしています。いくつかの提案されたソリューションは、stackoverflow上に存在するが、私は働くことができませんでした。

現在のHTMLコード：

<div id = "inline_elements" style="width:100%"> 
    <div class="data" id="text_data"><input type="text" width="48" height="48"/></div> 
    <div class="svg_container"> 
     <svg id="svg_image" width="48" height="48"></svg> 
    </div> 
</div> 

CSSコード：

#svg_image { 
    width: 48px; 
    height: 48px; 
    vertical-align: middle; 
} 

.data { 
    display: inline-block; 
} 

.svg_container { 
    display: inline-block; 
} 

任意の助けをいただければ幸いです。

https://jsfiddle.net/bzu2x1vv/

Iは、次のIDフィールドを変更しようとしたが、静止画像は、入力フィールドの下に配置されている：

.data { 
    width: 50%; 
    float: left; 
    text-align: left; 
} 

.svg_result_container { 
    width: 50%; 
    float: right; 
    text-align: right; 
} 

Answer 1

ウルHTMLで100％の幅を有する親DIVを作成します。その後、2つの子divを作成します。最初の子divの幅は50％、浮動小数点はleft、テキストはcenterプロパティになります。他のdivに含まれる画像は、幅50％の浮動小数点の右のテキストのようなプロパティを持ちます。

これを試して教えてください。

Answer 2

それが答えを持っているように私はこの質問を削除することはできませんが、あるようなコードが