Two div elements in one line but one is transparent - html

Question

I want to have gray div with width: (100% - 330px).
It would be easy using 2 div elements if both had bg-color, but I need one with fixed size to be transparent.
I know I can solve this problem with calc(), but I'd prefer to avoid it.
#transp {
width:330px;
float:right;
height: 18px;
}
#grayline {
background-color: #444;
height: 18px;
width: 100%;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="transp"></div>
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>

Answer 1

Remove the width from .grayline and add a right margin of 330px:
#transp {
width: 330px;
float: right;
height: 18px;
}
#grayline {
background-color: #444;
height: 18px;
margin-right: 330px;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="transp"></div>
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>

Answer 2

you can use margin-right: 330px for .grayline
no need to use 2 divs
#grayline {
background-color: #444;
height: 18px;
margin-right: 330px;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
<div>
<!--This how it looks-->
<div id="grayline"></div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>

Answer 3

Without calc() wrapper class div
<div>
<div class="wrapper">
<div class="trans-wrapper">
<div id="transp"></div>
</div>
<div id="grayline"></div>
</div>
</div>
<br />
<div>
<!--This how it should look-->
<div id="grayline2"></div>
</div>
.wrapper {
display: table;
position: relative;
width: 100%
}
.trans-wrapper {
display: table-cell;
width: 1%;
white-space: nowrap;
}
#transp {
width: 330px;
height: 18px;
white-space: nowrap;
background:red;
}
#grayline {
background-color: #444;
height: 18px;
width: 100%;
display: table-cell;
}
#grayline2 {
background-color: #444;
height: 18px;
width: calc(100% - 330px);
}
Fiddler link https://jsfiddle.net/prnrjdt5/