2 fluid block elements side by side share space - html

Question

I have 2 elements which hold text, both are unknown width and I dont want to add fixed width to copy div.
How do I make them float in one line and always occupy 100% width together? (without tables)
.data{
max-width:400px;
}
.code {
color: #fff;
margin: 0;
padding: 8px!important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
float: left;
}
.copy {
color: #ccc;
display: inline-block;
padding: 3px!important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
float: right;
margin-top: 1px;
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>

Answer 1

You can do it with the Flexbox:
.data {
display: flex; /* displays flex-items (children) inline by default */
align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
max-width: 400px;
}
.code {
color: #fff;
margin: 0;
padding: 8px !important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
/*float: left; not necessary*/
}
.copy {
color: #ccc;
/*display: inline-block; not necessary*/
padding: 3px !important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
/*float: right; not necessary*/
margin-left: 10px; /* design purposes */
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>

Answer 2

Use can use flexible box to deal with this. Just need to add display:flex in your .data. For more info, please read here
.data{
max-width:400px;
display:flex;
}
.code {
color: #fff;
margin: 0;
padding: 8px!important;
line-height: 1.2;
font-size: 11px;
background: #bbb;
border: 1px solid #333;
word-wrap: break-word;
float: left;
}
.copy {
color: #ccc;
display: inline-block;
padding: 3px!important;
font-size: 12px;
cursor: pointer;
border: 1px solid #999;
float: right;
margin-top: 1px;
}
<div class="data">
<p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
<div class="copy">COPY</div>
</div>