Need to work out CSS - html

Question

I've re-structured this question as my previous one was too broad. Hopefully, this is refined enough?
I need to reproduce the same as in the image... Ive spent a day trying to produce it but just cant get it to work.
The red box is a div which can be of varying height or width. The checkbox needs to be centered vertically. Both green divs will be parent containers for other inline elements. The first green box will have a set width and the second will take up the remaining space.
If I have asked this incorrectly then please let me know...how best to ask it...?
Here is my markup so far
#profiles-container {
width: 100%;
height: 100%;
background-color: #dedede;
padding: 20px;
}
.profile-container {
float: left;
width: 50%;
vertical-align: top;
font-size: 0;
box-sizing: border-box;
position: relative;
}
.profile-checkbox {
position: absolute;
width: 40px;
left: 0;
text-align: center;
line-height: 100px;
}
.profile-container-inner {
height: 100px;
background-color: #fff;
border-left: solid 1px #bbb;
border-right: solid 1px #bbb;
border-radius: 5px;
font-size: 13px;
margin-left: 40px;
}
.container1 {
float: left;
width: 200px;
background-color: #ccc;
height: 100%;
}
.container2 {
float: left;
background-color: #ccc;
height: 100%;
}
.profile-bar-color {
background-color: #00bfff;
width: 10px;
float: left;
height: 100%;
}
<ul id="profiles-container">
<li class="profile-container">
<div class="profile-checkbox"><input type="checkbox"/></div>
<div class="profile-container-inner">
<div class="profile-bar-color"> </div>
<div class="container1">
<h3>Annie Jane</h3>
</div>
<div class="container2">Some content</div>
</div>
</li>
<li class="profile-container">
<div class="profile-checkbox"><input type="checkbox"/></div>
<div class="profile-container-inner">
<div class="profile-bar-color"></div>
<div class="container1">
<h3>Joe Bloggs</h3>
</div>
<div class="container2">Some content</div>
</div>
</li>
</ul>

Answer 1

.module {
height: 100px;
width: 100%;
}
.checkbox {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.content {
position: relative;
height: 100%;
margin-left: 25px;
}
.fixed-width {
float:left;
height: 100%;
width:180px;
}
.dynamic-width {
height: 100%;
width: 100%;
}
<div class="module" style="background-color: green">
<input class="checkbox" type="checkbox">
<div class="content" style="background-color: orange">
<div class="fixed-width" style="background-color: yellow">
<p>Test</p>
</div>
<div class="dynamic-width" style="background-color: blue">
<p>Test</p>
</div>
</div>
</div>

Answer 2

Use html tables.
CodePen
<table id="container">
<tr>
<td class="left">
<input type="checkbox">
</td>
<td class="center">Center</td>
<td class="right">Right</td>
</tr>
</table>
#container{
width:100%;
height:200px;
background:red;
padding:10px;
}
.left{
background:blue;
width:50px;
vertical-align: middle;
padding:10px;
}
.center{
background:green;
}
.right{
background:green;
width:100%;
}

Answer 3

Here is a code which matches what you need and also centers the text vertically :
.container {
height: 200px;
}
.right {
width:auto;
height:100%;
background:red;
overflow:hidden;
}
.left {
height:100%;
width:100px;
background:blue;
float:left;
}
.left2 {
height:100%;
width:300px;
background:green;
float:left;
}
.vert-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.center {
text-align: center;
}
<div class="container">
<div class="left">
<div class="vert-center center">
<input type="checkbox" name="name" />
</div>
</div>
<div class="left2">
<div class="vert-center">
Here some text
</div>
</div>
<div class="right">
<div class="vert-center">
Here some more text
</div>
</div>
</div>
Code adapted from the well explained answer of Xanthir, by adding another div and vertical aligns :
Expand a div to take the remaining width

Answer 4

Flexbox can do the basic layout.
.container {
height: 100px; /* or any height */
display: flex;
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container input {
align-self: center; /* vertically centered */
margin-right: 1em;
}
.left,
.right {
border: 1px solid green;
}
.left {
width: 150px; /* fixed width */
background: pink;
}
.right {
flex: 1; /* remaining width */
background: #c0ffee;
}
<div class="container">
<input type="checkbox" />
<div class="left"></div>
<div class="right"></div>
</div>