Display issue with CSS

Question

I'm working on a checkout page for training, I'm new to css and react. I would like my text to be displayed inline like in the picture1 enter image description herebut I got so far is this picture2enter image description here I tried to change the position, then top and left, I tried also flex:'right' on the Total text, but I don't think it's the right approach. Can some help or give a hint?

import React, { Component } from 'react';
import './Order.css';


class Order extends Component {
    constructor(props) {
        super(props)
        this.state = {
            price: 0, 
            name: "", 
            quantity: 0, 
            image: "",
            itemList: [
            {image:('Images/prod-TN-1.jpg'), price: 949.00, name: '17ft x 12ft Jumpking Deluxe Rectangular Trampoline with Enclosure', quantity: 1 },
            {image:('Images/prod-TN-2.jpg'), price: 369.00, name: '14ft Salta Black Round Confort Edition Trampoline with Enclosure', quantity: 1 }
        ]}

        
    }

    total() {

       return this.state.itemList
       .reduce((a, b) => a + b.price, 0);

    }
    render() {
    
        return (
            <div>
                <h2 className="order-header">Here's What You've Ordered</h2>
                <div >

                <div>
               
                    {this.state.itemList.map((item, index) => (
                         <div className="order-text" style={{clear:"left"}}key={index}>
                         <p style={{float:'left'}}> <img className="prod" src={item.image}  alt=""/></p> 
                          <p className="name"> {item.name}</p>  
                         <p>£{item.price}</p> 
                         <p>QTY{item.quantity}</p>
                           
                         </div>
                         
                    )
                   )}
                </div>

                <div className="line-bottom"></div>

                <div className="total">
 
                <h3>Subtotal <span>£{this.total()}</span></h3>
               
                <span>Delivery</span>
              <span>Next Working Day (if ordered before 3pm)</span>
                <h3>Free</h3>

                 <h3>Total  <span>£{this.total()}</span></h3>

                <div className="payment">
                 <p>You paid using Mastercard</p>
                 <img className="card-icon" src="Images/card-icon.svg" alt="card" />
                 </div>
               
                </div>

            

                </div>
            </div>
        );
    }
   
}

export default Order;

.order-text {
   
    font-weight: bolder;
    /* border-top: lightgray 1px solid; */
    margin-left: 20px;
    font-size: 12px;
    
   
    
}

.name {
    margin-top: 40px;
    font-size: 12px;
}



.order-header {

    margin-left: 20px;

}

.line-bottom {

    border-top: lightgray 1px solid;
    margin-top: 80px;

}

.prod {
    height: 100px;
    width: 100px;
   
}

.total {
    font-size: 12px
}

.card-icon {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 11%;
    top: 99%;
    
}

Answer 1

Here's a different look at this using display: flex. You could also choose a grid display, but flex is more widely known and it seemed a better starting place.

Basically, I made a container that is a flex display. The default direction for a flex container is row, meaning that any children will stack horizontally. That container's immediate children (.container > *) each take up 50% of the container. There are two immediate children, the left (.inventory) and right (.totals).

With this set up, then you can move to each individual blocks. For example, within .inventory are .items. Each .item is also receives a flex display, for managing layout more easily. Notice that at smaller screen sizes (< 600px), the .container stacks vertically. This divide and conquer approach can be a good methodology for tackling layout challenges.

I understand I've left out many details, but this was just to show how I might setup this layout. The hope is to give you some ideas for making your work better, and not just fire off a quick fix that becomes lost in the void.

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container,
.inventory,
.inventory .item {
  display: flex;
}

.inventory,
.inventory .item {
  gap: 1rem;
  align-items: center;
  padding-inline-end: 0.5rem;
}

.container {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  padding-block: 1rem;
}

.container>* {
  flex-basis: 50%;
}

.inventory {
  flex-direction: column;
  position: relative;

  --img-thumbnail-height: 50px;
  --img-thumbnail-width: 100px;
}

.inventory::after {
  content: '';
  border-right: 1px solid lightgray;
  position: absolute;
  right: 0;
  bottom: -1rem;
  top: -1rem;
}

.inventory .item:not(:last-child) {
  border-bottom: 1px solid lightgray;
  padding-bottom: 1rem;
}

.inventory .item img {
  flex-grow: 0;
  width: var(--img-thumbnail-width);
  height: var(--img-thumbnail-height);
}

.totals {
  padding: 1rem;
}

.totals button {
  display: block;
  padding: 0.75rem 0;
  width: 100%;
  background-color: lightgray;
  border: none;
  appearance: none;
}

@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }

  .inventory {
    border-bottom: 1px solid lightgray;
    padding-block-end: 1rem;
  }

  .inventory::after {
    content: normal;
  }
}

<h2>Here's What You've Ordered</h2>

<div class="container">

  <div class="inventory">
    <div class="item">
      <img src="https://via.placeholder.com/100x50" alt="">
      <div class="item-meta">
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem qui aperiam nemo delectus sed quam</div>
        <div class="price">949.00</div>
      </div>
    </div>

    <div class="item">
      <img src="https://via.placeholder.com/100x50" alt="">
      <div class="item-meta">
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem qui aperiam nemo delectus sed quam</div>
        <div class="price">949.00</div>
      </div>
    </div>
  </div>

  <div class="totals">
    Totals will go here…
    <button>You paid using MasterCard</button>
  </div>

</div>

jsFiddle

Answer 2

You will need to add display: flexbox to the div that contains the total and the divs that have the products, see this codesandbox.

Answer 3

If you're talking about the quantity text, you can put a class on it:

 <p className='qty'>QTY{item.quantity}</p>

And do something like this to push it to the right of the container:

.qty {
  position: absolute;
  right: 1rem;
  top: 1.5rem;
}

On .order-text, make sure to set position: relative so the .qty stays within the container.

Are you also talking about getting the subtotal section to display beside the item list section, or do you know how to do that part?