Even in ab HTML web site, you need to provide enough space for the elements to be able to fit in. Otherwise, they will continue to stack themselves from top to bottom. In your case, the problem is similar (as per default CSS; you have not shown any CSS code).
I have tried a similar case as you are having. I added some CSS properties to change the width of elements, set them to a value that can hold both of the child element. Then finally, set them to display inline.
<!--
<div class="container">
<p>Where some see a Wastewater Treatment Plant, Huber Technology envisions a Resource Recovery Center.</p>
<div class="col-xs-6">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
</div>
</div>
To align the paragraph and the Google's logo in one place, I used the following CSS code,
.container {
width: 100%;
}
.container p, .container div img {
display: inline-block;
}
.container p {
width: 60%;
float: left;
}
.container div img {
width: 38%;
float: right;
}
The content was aligned in a line; because of their widths set to a percentage of their parent's and the display set to
inline-block
. You can test the above sample at,
http://jsfiddle.net/afzaal_ahmad_zeeshan/2hu1dk3w/[
^].