I've been attempting to display an HTML input element and an SVG image on the same line without success. I've tried various solutions from stackoverflow, but none seem to work for me.
Here's my current HTML code:
<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 code:
#svg_image {
width: 48px;
height: 48px;
vertical-align: middle;
}
.data {
display: inline-block;
}
.svg_container {
display: inline-block;
}
I would greatly appreciate any assistance.
I attempted modifying the following ID fields, but the image still displays below the input field:
.data {
width: 50%;
float: left;
text-align: left;
}
.svg_result_container {
width: 50%;
float: right;
text-align: right;
}