Solution 1 :

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.

Solution 2 :

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 *

Problem :

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

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

right there
enter image description here


Comment posted by

Comment posted by

Comment posted by So none of these worked for you?

So none of these worked for you?

Comment posted by how to place two divs besides each other

Does this answer your question?

Comment posted by Drokoz

i don’t know how to, sorry, very noobie at this

Comment posted by here

@Drokoz take a look in

Comment posted by Robert FeduČ™

Did you remove “float: left” and “float: right”? Try this way.

Comment posted by Drokoz

Nop, i tried a lot of things, i also have an accordion that it doesn’t work. But is just in that part

Comment posted by Drokoz

It’s working now, i deleted a div above that. Thanks a lot!! i really appreciate it!