Есть два блока child, в которых текст и инпут. Ширина блоков child должна зависеть от содержимого наибольшего блока. При уменьшении блока parent инпуты должны перемещаться под текст одновременно, даже если текст одного из блоков меньше другого (на изображениях более наглядно в чём проблема). Есть какие-либо способы решить данную проблему? Без разницы на чём flex или grid.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
display: inline-block;
}
.child {
padding: 10px;
background-color: gold;
border: 1px solid black;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.text {
display: block;
white-space: nowrap;
}
.input {
display: block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="text">
Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="input">
<input type="text" name="" id="">
</div>
</div>
<div class="child">
<div class="text">
Text Text Text Text Text Text Text Text Text
</div>
<div class="input">
<input type="text" name="" id="">
</div>
</div>
</div>
</body>
</html>