How to put three divs next to each other in HTML?

Issue

Hello I'm trying to display 3 div elements inline with each other and does not resize even if you change the size of the browser how do I go about it?

How it should look like:

Code:

body {}

#wrap {
    width: auto;
    margin: 0 auto;
    border: 0px solid;
    height: 200px;
    display: block;
}

#one {
    width: 40%;
    float: left;
    background: red;
}

#two {
    background: yellow;
}

#three {
    width: 40%;
    float: inherit;
    background: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Solution

Check this fiddle

#wrap::after {
    display: block;
    height: 0px;
    clear: both;
    float: none;
}

#wrap div {
    float: left;
    word-break: break-all;
}

#one {
    width: 40%;
    background-color: red;
}

#two {
    width: 20%;
    background-color: yellow;
}

#three {
    width: 40%;
    background-color: blue;
}

<div id="wrap">
    <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

Answered By - Ronen Cypis