Чтобы разместить две кнопки рядом с пробелом в HTML-документе, вы можете использовать различные методы. Вот несколько часто используемых подходов:

1. Использование системы сетки Bootstrap:

   <div class="container">
    <div class="row">
      <div class="col">
        <button class="btn btn-primary">Button 1</button>
      </div>
      <div class="col">
        <button class="btn btn-secondary">Button 2</button>
      </div>
    </div>
   </div>

   Этот метод использует систему сетки Bootstrap, помещая каждую кнопку в отдельные столбцы (col) внутри контейнера строки (row).

2. Использование Flexbox:

   <div >
    <button class="btn btn-primary">Button 1</button>
    <button class="btn btn-secondary">Button 2</button>
   </div>

   Здесь свойство display: flexприменяется к родительскому контейнеру, а gapиспользуется для добавления пространства между кнопками.

3. Использование CSS Float:

   <div>
    <button class="btn btn-primary" >Button 1</button>
    <button class="btn btn-secondary" >Button 2</button>
    <div ></div>
   </div>

   В этом методе обе кнопки перемещаются влево, а после них помещается пустой элемент clear, чтобы предотвратить перекрытие.

4. Использование CSS Grid:

   <div >
    <button class="btn btn-primary">Button 1</button>
    <button class="btn btn-secondary">Button 2</button>
   </div>

   Здесь свойство display:gridиспользуется для создания контейнера сетки, а grid-template-columnsразбивает контейнер на два равных столбца.