Помогите разместить блоки рядом

Question

Внутри контейнера у меня чекбокс, значения бокс - нейм которого выводятся в цикле и 2 контейнера должны рядом выводить списки, но не получается разместить их рядом. Имею:

.outerCheckbox {
  background: cadetblue;
  text-align: center;
}

.innerBox {
  width: 49%;
  background: coral;
}

.innerNamebox {
  float: left;
  width: 49%;
  background: darkgreen;
}

<div className="outerCheckbox">
                <form>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                    <br />
                </form>
            </div>

Второй вариант вывода цикла:

Получил в ответе:

Дерево после ответа:

<div className="outerCheckbox">
                <form className="a">
                <div className='v'>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                            <div className='asdass'>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                        </div>
                    <br />
                    </div>
                </form>

            </div>

Answer 1

  <div className="outerCheckbox">
                <form className="a">
                <div className='v'>
                    <br/>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerBox">
                            <input
                                onChange={() => changeHandler(item.id)}
                                type="checkbox"
                                id={item.id}
                                checked={item.checked}
                            /></div>))}
                            </div>
                            <div className='asdass'>
                    {opNames.map((item) => (
                        <div key={item.id} className="innerNamebox"><label htmlFor={item.id}>{item.name}</label></div>))}
                        </div>
                    <br />
                </form>

            </div>

Не знаю правильно ли я понял, да и реакт код тут.

.outerCheckbox {
  background: cadetblue;
  text-align: center;
}

.a{
  display: flex;
  justify-content: space-around;
}

.innerBox {
  background: coral;
}

.innerNamebox {
  line-height: 21px;
  background: darkgreen;
}

 <div class="outerCheckbox">
                <form class='a'>
                  <div class='v'>
                        <div class="innerBox"><input /></div>
                        <div class="innerBox"><input /></div>
                        <div class="innerBox"><input /></div>
                      </div>
                      <div class='asdass'>
                        <div class="innerNamebox"><label>МТС</label></div>
                        <div class="innerNamebox"><label>МТС2</label></div>
                        <div class="innerNamebox"><label>МТС3</label></div>
                      </div>
                </form>
            </div>

БЛОГ НА HUSL

Помогите разместить блоки рядом

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