Как растянуть и выровнять блок
.container1{
width: 1200px;
display: flex;
border: 15px solid SkyBlue;
}
.container2{
padding: 25px;
flex:50%;
}
.container3{
flex-wrap: wrap;
}
.container3#cn2{
line-height: 1.5;
}
.container3#cn1{
margin-bottom: -10px;
color: #ca9535;
}
h1{
margin-bottom: -20px;
}
.container3#cn3{
display: flex;
}
.container4{
text-align: center;
border: 1px solid #ca9535;
}
.container4#square1{
flex: 2;
margin-right: 20px;
background: #ca9535;
color: white;
}
.container4#square2{
color: #ca9535;
flex: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мероприятие</title>
<style type="text/css"></style>
<link type="text/css" rel="stylesheet" href="dr.css" />
</head>
<body>
<div class="container1">
<div class="container2"><img src="img/kar.jpg" alt="#" width="100%" height="100%"></div>
<div class="container2">
<div class="container3" id="cn1"><big>27 сентября - 30 сентября</big></div>
<div class="container3" id="cn2">
<h1>День рождения Заимки</h1>
<p><big>Друзья, Ура!!! 27 июля в честь Дня рождения Заимки состоится <br>
праздничный концерт дуэта "2 МАШИ" - испольнительниц <br>
популярнейших хитов "Босая", "Мама я танцую", "Красное <br>
белое" и др. Для всех проживающих билеты на концерт - в <br>
подарок!!!*</big></p>
</div>
<div class="container3" id="cn3">
<div class="container4" id="square1">Забронировать<br> мероприятие</div>
<div class="container4" id="square2">Оплатить</div>
</div>
</div>
</div>
</body>
</html>Как сделать чтобы кнопки "Забронировать мероприятие" и "Оплатить" растянулись до уровня низа картинки ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Мероприятие</title>
<style type="text/css"></style>
<link type="text/css" rel="stylesheet" href="dr.css" />
</head>
<body>
<div class="container1">
<div class="container2"><img src="img/kar.jpg" alt="#" width="100%" height="100%"></div>
<div class="container2">
<div class="container3" id="cn1"><big>27 сентября - 30 сентября</big></div>
<div class="container3" id="cn2">
<h1>День рождения Заимки</h1>
<p><big>Друзья, Ура!!! 27 июля в честь Дня рождения Заимки состоится <br>
праздничный концерт дуэта "2 МАШИ" - испольнительниц <br>
популярнейших хитов "Босая", "Мама я танцую", "Красное <br>
белое" и др. Для всех проживающих билеты на концерт - в <br>
подарок!!!*</big></p>
</div>
<div class="container3" id="cn3">
<div class="container4" id="square1">Забронировать<br> мероприятие</div>
<div class="container4" id="square2">Оплатить</div>
</div>
</div>
</div>
</body>
</html>
.container1{
width: 1200px;
display: flex;
border: 15px solid SkyBlue;
}
.container2{
padding: 25px;
flex:50%;
}
.container3{
flex-wrap: wrap;
}
.container3#cn2{
line-height: 1.5;
}
.container3#cn1{
margin-bottom: -10px;
color: #ca9535;
}
h1{
margin-bottom: -20px;
}
.container3#cn3{
display: flex;
}
.container4{
text-align: center;
border: 1px solid #ca9535;
}
.container4#square1{
flex: 2;
margin-right: 20px;
background: #ca9535;
color: white;
}
.container4#square2{
color: #ca9535;
flex: 1;
}