Выравнивание содержимого блока онтносительно содержимого другого блока

Question

Есть два блока 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>

Answer 1

Можно реализовать вот так:

        * {
            box-sizing: border-box;
        }
        .parent {
            display: inline-block;
        }

        .child {
            padding: 10px;
            background-color: gold;
            border: 1px solid black;
            position: relative;
        }

        .text {
            display: inline-block;
            white-space: nowrap;
            margin-right: 120px;
        }

        .input {
            display: block;
            width: 100px;
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .input input {
            width: 100%;
        }

    <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 Text Text Text Text Text
            </div>
            <div class="input">
                <input type="text" name="" id="">
            </div>
        </div>
    </div>

Answer 2

Думаю, что без js здесь не обойтись:

function leftOffset() {
  if($('#input-1').offset().left < 50) {
    $('.child-2').css('display','block');
  }
  else {
    $('.child-2').css('display','flex');
  }
}

leftOffset();

$(window).resize(function(){
  leftOffset();
})

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="input-1" id="input-1">
    </div>
  </div>
  <div class="child child-2">
    <div class="text">
      Text Text Text Text Text Text Text Text Text
    </div>
    <div class="input">
      <input type="text" name="input-2" id="input-2">
    </div>
  </div>
</div>

БЛОГ НА HUSL

Выравнивание содержимого блока онтносительно содержимого другого блока

Ответы (2 шт):