Блок чекбоксов прилеплен слева к низу, а кнопка "Add" прилеплена справа к низу. Как реализовать, чтобы на разных экранах ничего на съезжало?
html,
body {
margin: 0;
padding: 0;
}
h1 {
font-size: 18px;
font-weight: bold;
line-height: 29px;
color: #1b1b1b;
}
// body{padding-top: 10px}
.container {
display: flex;
width: 100%;
outline: 1px solid red;
/*del*/
padding-top: 25px;
background: #ffffff;
}
.left-block {
background: #e9e9e9;
width: 198px;
height: 663px;
-ms-flex: 0 198px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
}
.img-left {
text-align: center;
}
.img-left img {
margin-bottom: 23px;
}
.right-block {
// margin-left: 28px;
outline: 1px solid green;
/*del*/
-ms-flex: 0 198px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
width: 100%;
padding-left: 27px;
}
.text {
font-family: arial;
font-size: 18px;
font-weight: 700;
color: #177cbc;
}
hr {
height: 2px;
margin: 0;
border: 0;
background: linear-gradient(to right, #027abe 0%, transparent 100%);
}
.block-row {
margin-top: 20px;
display: flex;
min-height: 263px;
border: 1px solid #1b1b1b;
}
.img-block {
// width: 45%;
border-right: 1px solid #1b1b1b;
padding: 30px 55px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: center;
}
.outline {
display: inline-flex;
padding: 3px 9px;
border: 1px solid #1b1b1b;
}
.content-block {
position: relative;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company name</title>
</head>
<body>
<div class="container">
<div class="left-block">
<div class="img-left">
<img src="img/lb-1.jpg" alt="easyflex">
<img src="img/lb-2.jpg" alt="adv">
<img src="img/lb-1.jpg" alt="easyflex">
<img src="img/lb-2.jpg" alt="adv">
</div>
</div>
<div class="right-block">
<div class="text">Main content listing header.</div>
<hr>
<div class="block-row">
<div class="img-block">
<div class="outline"><img src="img/globe.png" alt="globe"></div>
</div>
<div class="content-block">
<h1>Header always on top and could be any length. Header always on top and could be any length.</h1>
</div>
<div class="check">
<form action="#" method="post">
<label><input type="checkbox">First option.</label><br>
<label><input type="checkbox">Second option.</label><br>
<label><input type="checkbox">Third option.</label><br>
<label><input type="checkbox">Fourth option.</label>
<input class="btn" type="submit" value="+add">
</form>
</div>
</div>
</div>
</div>
</body>
</html>