Problem with positioning 2 div horizontally-CodePudding

I recently started to learn html and css. I have problem with positioning 2 div horizontally

My code:

HTML:

<div class = "cart__itemwraper">
    <div class = "cart__item__image">
        <img src="images/laptop.png" style = "width: 100%; height: 100%;"/>
    </div>

    <div class = "cart__item__desc"> 
       <div class = "cart__item__name"> 
           <span>name name</span>
       </div>

       <div class = "cart__item__price"> 
            <span>price price</span>
        </div>
    </div>

    <div class= "cart__item__counter">
        <span> counter</span>
    </div>
</div>

CSS:

   .cart__itemwraper{
   width: 100%;
   display: flex;

}

.cart__item__image {
    width: 20%;
    background-color: red;
}

.cart__item__desc {
    width: 40%;
    display: flex;
    background-color: #814ce4;
}

        .cart__item__name {
            background-color: greenyellow;
            width: 100%;
        }
        .cart__item__price {
            width: 100%;
            background-color: #e44caa;
            display: flex;
            align-items: flex-end;
        }


.cart__item__counter{
    width: 40%;
    background-color: yellow;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

I would like to move the price to the position marked with the arrow in my using flexbox screenshot. Can someone tell my how i can do it?

CodePudding user response：

you can just add flex-direction: column; justify-content: space-between; to the cart__item__desc class.

.cart__itemwraper {
  width: 100%;
  display: flex;
}

.cart__item__image {
  width: 20%;
  background-color: red;
}

.cart__item__desc {
  width: 40%;
  display: flex;
  background-color: #814ce4;
  flex-direction: column;
  justify-content: space-between;
}

.cart__item__name {
  background-color: greenyellow;
  width: 100%;
}
.cart__item__price {
  width: 100%;
  background-color: #e44caa;
  display: flex;
  align-items: flex-end;
}

.cart__item__counter {
  width: 40%;
  background-color: yellow;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

<div class = "cart__itemwraper">
    <div class = "cart__item__image">
        <img src="images/laptop.png" style = "width: 100%; height: 100%;"/>
    </div>

    <div class = "cart__item__desc"> 
       <div class = "cart__item__name"> 
           <span>name name</span>
       </div>

       <div class = "cart__item__price"> 
            <span>price price</span>
        </div>
    </div>

    <div class= "cart__item__counter">
        <span> counter</span>
    </div>
</div>

Hope this answers your question.

CodePudding user response：

You can do this using order:1 and order:2 on the cart__item__name and cart__item__price classes, like this:

       .cart__item__name {
           background-color: greenyellow;
           width: 100%;
           order:2;
       }
       .cart__item__price {
           width: 100%;
           background-color: #e44caa;
           display: flex;
           align-items: flex-end;
           order:1;
       }

this will move the cart__item__price div to the first position, and the cart__item__name to the second.