I am designing a food order layout that features images on the left side, text in the middle, and an add button on the right.
Currently, the image is fixed on the left side while the button's position changes based on the length of the middle text. I would like to create a layout where both the image and the button are fixed on the sides and do not depend on the text length in the middle.
https://i.sstatic.net/84S94.png
In this layout, the button will be fixed on the right side just like the image on the left and won't shift based on the middle text length. If the text is too long, it will move to the next line.
Foodlist.js
import React from "react";
import "./Foodlist.css";
import { useStateValue } from "../../StateProvider";
function Foodlist({ id, title, rating...} />
);
}
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 {...}