Как иметь два деления в одной строке. Право и лево

Question

<div className="content">
 <div style={{ float: "left" }}> {pedido.nombre}</div> //name
 <div style={{ float: "right" }}> ${pedido.precio}</div> //price
</div>

это должно быть имя с левой стороны и цена с правой стороны, но оно остается с одной стороны от другой

прямо там

Answer 1

Попробуйте это css:

.content { display: flex; justify-content: space-between; }

Таким образом, у двух div будет пробел между ними, и он должен хорошо выглядеть.

Answer 2

Хотя подход с флексбоксом работает идеально, я хотел бы показать, как добиться описанного поведения, используя float.

Вот CSS

.float--left {
  float: left
}

.float--right {
  float: right
}

.clear {
  clear: both;
}

И некоторые HTML

<div class="float--left">name</div>
<div class="float--right">price</div>

<div class="clear">other content</div>

* Примечание: Добавлен пример того, как вернуть поведение плавающего в нормальное состояние с помощью clear *