В приложении реагировать html5, как расположить список 3 рядом друг с другом?

Question

Я создаю страницу реакции, используя Гэтсби и готовый шаблон. Я пытаюсь построить форму, и поставить 3 списка выбора рядом, так как содержимое мало. Но он продолжает укладывать их вертикально. Я попытался добавить css, чтобы перезаписать, что делает шаблон, но он не работает.

элементов. js:

    <div className="col-12">
        <div className="select-wrapper mb-5">
            <select name="demo-category1" id="demo-category1">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category2" id="demo-category2">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
        <div className="select-wrapper mb-5">
            <select name="demo-category3" id="demo-category3">
                <option defaultValue="">- Category -</option>
                <option value="1">Cat1</option>
                <option value="2">Cat2</option>
            </select>
        </div>
    </div>

В моей _form. с css:

    .select-wrapper {
        @include icon;
        display: block;
        position: relative;

        &:before {
            color: _palette(border);
            content: '\f078';
            display: block;
            height: _size(element-height);
            line-height: _size(element-height);
            pointer-events: none;
            position: absolute;
            right: 0;
            text-align: center;
            top: 0;
            width: _size(element-height);
        }

        select::-ms-expand {
            display: none;
        }
    }

    .demo-category1, .demo-category2, .demo-category3{
        width: 33% !important;
        display: inline-block !important;
        margin-right: 50px !important;
    }

Answer 1

Просто поместите display: flex на контейнер полей выбора, чтобы сделать их горизонтальными

(я изменил className = "col-12" на class = "col-12", чтобы заставить скрипку работать)

.col-12 {
  display: flex;
}

<div class="col-12">
  <div className="select-wrapper mb-5">
    <select name="demo-category1" id="demo-category1">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
  <div className="select-wrapper mb-5">
    <select name="demo-category2" id="demo-category2">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
  <div className="select-wrapper mb-5">
    <select name="demo-category3" id="demo-category3">
      <option defaultValue="">- Category -</option>
      <option value="1">Cat1</option>
      <option value="2">Cat2</option>
    </select>
  </div>
</div>