Try this css:

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

This way, the two divs will have space in between and it should look good.

While a flexbox approach works perfectly fine, I’d like to show how to achieve the described behaviour using float.

Here’s the CSS

.float--left {
  float: left
}

.float--right {
  float: right
}

.clear {
  clear: both;
}

And some HTML

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

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

*Note: Added a example how to reset the float behaviour back to normal using clear *

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

it should be name at left side and price on the right side, but it stays one side of the other

right there