Three divs on one line inside another div 100% width

[NorseMan]

I have one main div bar that I want to have three other DIV's inside. This bar is a 100% width. Ok, so inside this main bar i want three more. There are two div's for mail and phone icon. These should be placed all the way to the right and a div that should be all the way to the left. I have tried with display: inline-block; but it doesn't work. Can someone please tell me how to do this? The three divs inside the main div is in different sizes. Two of them are width 42px and height 44px. The one to the logo on left side is width 300 px and height 44px.

Please, help

[Michalio]

Use flex

Code: Select all

<div class="parent">
    <div class="full-width">1</div>
    <div>2</div>
    <div>3</div>
</div>

Code: Select all

.parent{
    display: flex;
}
.parent .full-width{
    flex-grow: 1;
}

You can read a great guide to flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[NorseMan]

Thank you sooo much Michalio This has been a thorn in my eye. And now it's working You made my day. Finally, i can go to sleep