У меня есть два столбца, я хочу, чтобы второй столбец всегда имел ту же высоту, что и первый столбец, если первый столбец увеличивается или уменьшается, а второй столбец следует высоте (я получил этот результат с помощью JavaScript, но я просто хотел css)
Любой совет, как мне этого добиться?
function pushInput () {
var mainColumn = document.querySelector("#main-column");
var input = document.createElement("input");
mainColumn.appendChild(input)
};
button {
font-size: 20px;
width: 100%
}
.container {
background: lightblue;
display: flex;
}
input {
width: 100%;
}
.item {
flex-basis: 100%;
padding: 10px;
}
<section class="container">
<div class="item" id="main-column">
<button onclick="pushInput()">+</button>
<input/>
</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</section>
Текущий сценарий
Желаемый сценарий
желаемый сценарий роста столбца