Align left and right elements contained in a parent div - html

Question

I want the text Immunization coverage with a purple background to be on the left, while the text HIT and the switch are aligned to the right.
Also I would like the switch to be on the left of HIT.
How can I do?
#legendRectContainer {
border: 1px solid black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 26px;
height: 15px;
background-color: lime;
margin-top: 3.5px;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 11px;
width: 11px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(11px);
-ms-transform: translateX(11px);
transform: translateX(11px);
}
/* Rounded sliders */
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}
#legendRectRow {
background-color: yellow;
display: flex;
align-items: center;
}
#titleLegendRectRow {
float: left;
}
#switchTitleLegendRectRow {
background-color: orange;
float: right;
}
#switchLegendRectRow {
text-align: right;
float: right;
}
#switchAndHit {
border: 1px solid green;
}
#svgLegendRectRect text {
font-size: 7pt;
font-weight: 100;
}
.legendLinAxis path, .legendLinAxis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.legendLinG .tick line {
stroke: black;
stroke-width: 1px;
}
.chartTitle {
font-weight: 500;
margin: 0;
background-color: DeepPink;
padding: 5px;
}
<div class='columnFooter' id='legendRectContainer'>
<div id='legendRectRow'>
<div class='colTitleRowLegendRect' id='titleLegendRectRow'>
<p class='chartTitle'>Immunization coverage</p>
</div>
<div class='colTitleRowLegendRect' id='switchTitleLegendRectRow'>HIT</div>
<div class='colTitleRowLegendRect' id='switchLegendRectRow'>
<label class="switch">
<input type="checkbox" id='legendRectSwitchButton' autocomplete='off'>
<span class="slider round"></span>
</label>
</div>
</div>
<div id='legend-rect'></div>
</div>

Answer 1

The problem is you should not use floats along with flexbox:
#legendRectRow {
background-color: yellow;
display: block;
overflow: hidden;
}
#legendRectContainer {
border: 1px solid black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 26px;
height: 15px;
background-color: lime;
margin-top: 3.5px;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 11px;
width: 11px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(11px);
-ms-transform: translateX(11px);
transform: translateX(11px);
}
/* Rounded sliders */
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}
#legendRectRow {
background-color: yellow;
display: block;
overflow: hidden;
}
#titleLegendRectRow {
float: left;
}
#switchTitleLegendRectRow {
background-color: orange;
float: right;
padding: 5px;
}
#switchLegendRectRow {
text-align: right;
float: right;
}
#switchAndHit {
border: 1px solid green;
}
#svgLegendRectRect text {
font-size: 7pt;
font-weight: 100;
}
.legendLinAxis path,
.legendLinAxis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.legendLinG .tick line {
stroke: black;
stroke-width: 1px;
}
.chartTitle {
font-weight: 500;
margin: 0;
background-color: DeepPink;
padding: 5px;
}
<div class='columnFooter' id='legendRectContainer'>
<div id='legendRectRow'>
<div class='colTitleRowLegendRect' id='titleLegendRectRow'>
<p class='chartTitle'>Immunization coverage</p>
</div>
<div class='colTitleRowLegendRect' id='switchTitleLegendRectRow'>HIT</div>
<div class='colTitleRowLegendRect' id='switchLegendRectRow'>
<label class="switch">
<input type="checkbox" id='legendRectSwitchButton' autocomplete='off'>
<span class="slider round"></span>
</label>
</div>
</div>
<div id='legend-rect'></div>
</div>

Answer 2

i just remove display:flex and just add overflow:auto to #legendRectRow id
#legendRectContainer {
border: 1px solid black;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 26px;
height: 15px;
background-color: lime;
margin-top: 3.5px;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 11px;
width: 11px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(11px);
-ms-transform: translateX(11px);
transform: translateX(11px);
}
/* Rounded sliders */
.slider.round {
border-radius: 15px;
}
.slider.round:before {
border-radius: 50%;
}
#legendRectRow {
background-color: yellow;
overflow:auto;
align-items: center;
}
#titleLegendRectRow {
float: left;
}
#switchTitleLegendRectRow {
background-color: orange;
float: right;
}
#switchLegendRectRow {
text-align: right;
float: right;
}
#switchAndHit {
border: 1px solid green;
}
#svgLegendRectRect text {
font-size: 7pt;
font-weight: 100;
}
.legendLinAxis path, .legendLinAxis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.legendLinG .tick line {
stroke: black;
stroke-width: 1px;
}
.chartTitle {
font-weight: 500;
margin: 0;
background-color: DeepPink;
padding: 5px;
}
<div class='columnFooter' id='legendRectContainer'>
<div id='legendRectRow'>
<div class='colTitleRowLegendRect' id='titleLegendRectRow'>
<p class='chartTitle'>Immunization coverage</p>
</div>
<div class='colTitleRowLegendRect' id='switchTitleLegendRectRow'>HIT</div>
<div class='colTitleRowLegendRect' id='switchLegendRectRow'>
<label class="switch">
<input type="checkbox" id='legendRectSwitchButton' autocomplete='off'>
<span class="slider round"></span>
</label>
</div>
</div>
<div id='legend-rect'></div>
</div>
tell me if any other question