Two div side by side in one container css - css

Question

I want to have two div side by side in one container: the first is an image (the width is fixed but the code should be applied for different images with different widths) . The second will take the rest of the container.
.conteiner {
position: relative;
}
.image{
display: inline-block;
top: 0;
right: 0;
position: absolute;
width: auto;
}
.text{
display: inline-block;
position: relative;
max-width: 100%;
}
But the image will be placed over the text.
<div class="container">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat.
</p>
</div>
<div class="image">
<img width="151" height="97">
</div>
In this example, the image had width 151px and 97 px height. But but for other images should not be the same.

Answer 1

Remove top: 0;right: 0;position: absolute; to stop your .image from being positioned absolutely so that the text does not overlap it.
alter your width's to match so that P doesn't take over the width.
also add vertical-align:top; to keep items to the top.
see bellow
.conteiner {
position: relative;
}
.align {
vertical-align: top;
display: inline-block;
position: relative;
}
.text {
max-width: 50%;
}
.image {
max-width: 50%;
}
<div class="container">
<div class="text align">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat.
</p>
</div>
<div class="image align">
<img width="151" height="97">
</div>
This might be a more prudent solution for what you are after.
.conteiner {
position: relative;
display:table;
}
.align {
vertical-align: top;
display: table-cell;
position: relative;
}
<div class="container">
<div class="text align">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullmaco laboris nisi ut aliquip ex ea consequat.
</p>
</div>
<div class="image align">
<img width="151" height="97">
</div>

Answer 2

This is achieved by giving the image (or the image container) a float:left and the text container a margin-left.
Please take a look at this example:
https://jsfiddle.net/k4054xkm/
HTML:
<div class="container">
<div class="image">
<img src="http://placehold.it/200x200">
</div>
<div class="text">
<h1>Testtext</h1>
<p>A bit of Testtext</p>
</div>
</div>
CSS
.container {
position: relative;
}
.image{
float:left;
width:200px;
}
.text{
margin-left:220px;
}
Please adjust the width and margin-left to your needs.

Answer 3

You have position absolute on .image this mean that this block not realy takes width and the second block is relative he will take the same place the absolute block takes .image (over or under it).
you can try to rewrite css like this:
.conteiner {
}
.image{
float:right;
width: auto;
}
.text{
float: right;
max-width: 100%;
}
you can replace float: right to float: left if you start from left side.