Вывести элементы в одну строчку

1-ый способ: Flex

Для того, чтобы элементы выводились в одну строчку, достаточно задать им display: flex.

.items {
  display: flex;
}

Как видно на примере выше, элементы теперь выводятся в одну строчку, но они выводятся вплотную друг к другу. Добавить между ними отступ можно через свойство gap.

.items {
  display: flex;
  gap: 10px;
}

Результат:

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

2-ой способ: Grid

По умолчанию элементы, выводимые через display: grid выводятся друг под другом. Выводить их в одну строчку можно с помощью свойства grid-auto-flow.

.items {
  display: grid;
  gap: 10px;
  grid-auto-flow: column;
}

Результат: