CSS не разрешать разбивать элементы div на новую строку

Question

У меня есть веб-страница с некоторым динамически сгенерированным контентом, на этой странице у меня есть большой div (мы будем называть это контейнером), содержащий другие div (мы будем называть эти группы), каждый из этих div (Groups) содержит количество полей ввода. (Сколько не известно заранее, но я мог бы ограничить это чем-то вроде 1-10).

Мне нужны все входные данные в группе на одной строке, поэтому никаких разрывов строки (если этот термин правильный в этот контекст) в группе. В одной строке может быть столько групп, сколько уместится, но первым входом в новой строке всегда должен быть первый вход в этой группе.

В настоящее время у меня большая часть этой работы, за исключением всей строки сломать вещь Вот картинка текущей ситуации.

Как видите, группы разбиты, последние 3 входа в первой строке уже должны быть в следующей строке.

Есть ли способ отключить это поведение разрыва строки для всех элементов в div, сохраняя при этом возможность разбивать несколько этих div'ов?

Вот пример codepen .

Вот то css, которое у меня пока есть:

.number-fields input {
    width: 1cm;
    text-align: center;
}

.number-fields-input {
    margin: 5px;
}

* {
    background-color: #2F363F;
}

.form-control {
    color: lightcyan;
    display: inline;
    background-color: #2F363F;
}

#number-fields {
    padding-right: 5vh;
    width: 100%;
}

.input_group {
    display: inline;
    padding-right: 5vh;
}

Answer 1

Попробуйте использовать flexbox здесь с flex-wrap: wrap для контейнера и flex-wrap: nowrap для групп входов.

.container {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
}

.input-group {
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
}