Create a layout with a fixed image on the left, a button on the right, and center or center text

Question

I'm making a food order layout that contains an image on the left, text in the middle, and a button on the right.

The image is fixed to the left, but the button moves based on the length of the text in the middle. So I want to fix this layout:

The

button will also be fixed to the right, same as the left image, and not dependent on the middle test length.

If the text is longer, the text will be moved to the next line.

Foodlist.js

import React from "react";
import "./Foodlist.css";
import { useStateValue } from "../../StateProvider";

function Foodlist({ id, title, rating, image, price, info, stock, nostock }) {
 
  const [{ basket }, dispatch] = useStateValue();

  // console.log("This is the basket >>>", basket);


  const addToBasket = () => {
    // dispatch the item into the data layer
      dispatch({
          type: "ADD_TO_BASKET",
          item: {
              id: id,
              title: title,
              info: info,
              image: image,
              price: price,
              stock: stock,
              nostock: nostock,
              rating: rating,
          },
      });
  };


  return (
    <div className="food">
      <div className="food__details">
        <img src={image} alt="" />
        {/* <button onClick={addToBasket} style={{fontWeight: "bold"}}>
          <strong style={{fontSize: 20}}> </strong>
          Add
        </button> */}
      </div>

      <div className="food__title">
        <div className="food__info__layout">
          <p style={{fontWeight: "bold"}}>{title}</p>
          <p className="food__info">
            <small>¥ </small>
            <strong style={{fontSize: 14 ,fontWeight: 100}}>{price}</strong>
          </p>
        </div>

        <button onClick={addToBasket} style={{fontWeight: "bold"}}>
          <strong style={{fontSize: 20}}> </strong>
          Add
        </button>
        
      </div>
    </div>
  );
}

export default Foodlist

Foodlist.css

.food {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  align-items: center;
  margin: 5px;
}

.food__details{
  display: flex;
  flex-direction: row;
}

.food__details > img {
  max-height: 100px;
  width: 120px;
  object-fit: contain;
  margin-right: 10px;
  border: 1px solid gold;
  border-radius: 10px;
  overflow: hidden;
}

/* 
.food__details > button {
  background: gold;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  height: fit-content;
  width: fit-content;
} */


.food__info__layout {
  display: flex;
  flex-direction: column;
}

.food__info {
  display: flex;
  flex-direction: row;
  height: auto;
  /* margin-bottom: 5px; */
}

.food__title {
  display: flex;
  flex-direction: row;
}

.food__title > button {
  background: gold;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  height: fit-content;
  width: fit-content;
  margin-left: 15px;
}

Answer 1

To have the image on the left and the button on the right, regardless of the length of the intervening text, you can set grid-template-columns: auto 1fr auto on the grid to include them as direct children wrapper.

Find the simplified version you want below. Note that I simplified the HTML structure. If you copy over, don’t forget to change React’s class to className.

.food {
  display: grid; 
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background-color: lightgrey;
}

.food > img {
  max-height: 100px;
  width: 120px;
  object-fit: cover;
  border: 1px solid gold;
  border-radius: 10px;
}

.food .food__title {
  margin-top: 0;
}

.food .food__button {
  background: gold; border: none; cursor: pointer;
  border-radius: 5px; font-weight: bold;
  padding: 0.5rem;
}

<div class="food">
  <img
    class="food__image"
    src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
    alt=""
  />

  <div class="food__desc">
    <h2 class="food__title">Lorem Ipsum is simply dummy text of the printing</h2>
    <p class="food__info">
      <small>₹ </small>
      <strong>12</strong>
    </p>
  </div>

  <button class="food__button">
    <strong>+ </strong>
    Add
  </button>
</div>