How can I position two <div>? One from the left and one from the right of a bootstrap modal?

Let's as is that I have a bootstrap modal, in the body of the modal. I have two <div> the <div> from the left contains an image while the <div> from the right contains the caption of the image.

Target Output!

Let's assume that this is a bootstrap modal body:

--------------            ----------------
|            |            |              |
|            |            |Name:         |
|  <image>   |            |Description:  |
|            |            |Price:        |
|            |            |              |
--------------            ----------------

Nevermind of the space in between the two divs, let's just assume that it is just a small space. So the question is how can I put two <div> in a same alignment where the first <div> is on the left and the other one is on the right?

As of now, this is what I have done.

---------------
|             |
|             |
| <image>     |
|             |
|             |
---------------

---------------
|             |
|             |
|Name:        |
|Description: |
|Price:       |
|             |
---------------

The other <div> goes down instead to the right.

Here is my code for the above wrong output.

CSS

#divforimg{
    position: left;

}

#divforinfo {
    position: right;
}

HTML

            <div class="modal-body">

                    <div id = 'divforimg'>
                    <img style="height:50%; width:50%;" id = 'appimage'>
                    </div>

                <div id = "divforinfo">
                    <i><p id = "appdesc"></p></i>
                    <strong>Price: </strong><label id = "appprice"></label><br>
                    <strong>Brand: </strong><label id = "appbrand"></label><br>
                    <strong>Color: </strong><label id = "appcolor"></label><br>
                    <strong>Model: </strong><label id = "appmodel"></label><br>
                    <strong>Available Quantity: </strong><label id = "appqty"></label><br>
                    <strong>Date Posted: </strong><label id = "appposted"></label><br>
                </div>


        </div>

Nevermind of the image source above, and other fields included. Thank you!

Solution

Should be a simple matter of giving them both a width and floating them:

CSS

#divforimg{
    width:200px;
    float:left;

}

#divforinfo {
    width:200px;
    float:left;
}

To get it more like your example, change the second to float:right; and it'll stick to the right side of its container.