responsive 3-columns layout with third column having fixed size - html

Question

I am trying to create a simple element consisting of 3 columns, the 3. column being an icon-image.
I want the element to be responsive, but the icon-image should always have the same size (e.g. 40x40 px).
So, the 1. and 2. column should have % values, the 3. column should have width 40px. I don't want the icon-image to resize on smaller screens. The icon should always have width 40px.
.container {
width: 80%;
}
.text1 {
float: left;
width: 30%;
}
.text2 {
float: left;
width: 50%;
}
.image {
float: right;
width: 120px;
}
<div class="container">
<p class="text1">Some Titel</p>
<h3 class="text2">Some Text and some more text...</h3>
<img src="image1.jpeg" alt="" class="image" />
</div>
https://jsfiddle.net/mkrizanek/usfmk6r7
Kind regards,
Milan

Answer 1

I have tweaked a little bit with HTML and CSS. But I hope you will get the logic. I have changed the display-type of container to flex. You can change the with of elements inside container as per your requirements.
.container {
background-color: #DDDDDD;
width: 80%;
display: flex;
}
.text {
background-color: #BBBBBB;
width: 50%;
}
.heading {
background-color: #999999;
width: 50%;
}
img {
max-width: 120px;
max-height: 120px;
}
<div class="container">
<p class="text">Some Text</p>
<h3 class="heading">Heading</h3>
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="image" />
</div>

Answer 2

Your best option is probably to use flex.
Set "display: flex; justify-content: space-between" on the container div, and "flex: 1;" on each section that you want responsive.
If you want the text in the second div to push all the way to the image, you can also add "text-align: right;" to it.
.container {
display: flex;
justify-content: space-between;
}
.text1 {
flex: 1;
}
.text2 {
flex: 1;
}
.image {
width: 40px;
height: 40px;
background: #088;
}
<div class="container">
<p class="text1">Some Title</p>
<h3 class="text2">Some Text and some more text...</h3>
<img alt="" class="image" />
</div>
Here is a good resource for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.