What is the best way to create a design that features a static image on the left, a button on the right, and space in the middle for text?

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 {...}

Answer №1

If you want to position the image on the left and the button on the right, regardless of the text length in between, you can achieve this by setting

grid-template-columns: auto 1fr auto
on a wrapper that contains them as direct children.

Below is a simplified example of what you are looking for. Please note that I have simplified the HTML structure. When copying and pasting, remember to change class to className for React.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the div to not adjust to the browser window when the vertical size is decreased?

Imagine a basic HTML page like this: <doctype> <html> <head> <title>My Amazing Page</title> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> </head&g ...

The operation cannot be found

I am completely new to javascript, so here is my situation: I'm attempting to integrate a reading-position-indicator into my WordPress theme. To achieve this, I placed a div right behind the footer, close to all the script tags, as the position bar s ...

Align several labels and text areas in the center

I am facing an issue with aligning multiple labels and textareas together. Currently, they line up like this: __________________ | | | | Label:|__________________| However, I want them to appear as fol ...

Using the # symbol alongside other characters or numbers may prevent Reg Ex from validating

I am asking the same question again as I did before. I apologize, but I have checked all the links provided and they were not helpful. Also, this is my first time asking a question here so I was not very clear on how to ask. Here are the details of my iss ...

Is there a way to temporarily disable the textfield so that it becomes enabled upon typing?

Is there a way to implement code so that the textfield starts off in a disabled state, but becomes enabled once text is typed into it? Additionally, I want only that specific textfield to be updated when the form is submitted. <form onSubmit={handleS ...

Refresh the block's content seamlessly without the need for a page reload

Within the index.html page There exists a block called content that contains various content blocks. An additional navigation menu with numerous links is present. It is important that when you click on a menu link, the content within the content block re ...

Is there a way to customize the slicing of *ngFor in a component according to the components it is being injected into?

This code snippet represents a component that needs to be included in other components: <div class="row"> <div class="col-12 [...]" *ngFor="let course of courses"> <div class="card"> ...

iOS: Incorrect element is currently being scrolled by the user

I encountered an unusual scrolling problem on iOS (7 or 8) while browsing www.cahri.com/tests/scroll How can you replicate this issue? Visit the example page on your iPhone/iPad/iOS Simulator in landscape mode Use your right thumb to touch and scroll th ...

When I incorporate a gradient, the background of my Bootstrap button flickers when clicked

I have implemented Bootstrap 4 with the following code snippet: <!-- Flickers on click --> <a href="javascript:void(0)" class="btn btn-primary">.btn .btn-primary</a> <!-- Does not flicker on click --> <a href="javascript:void(0 ...

Tips for starting the debugging process with POST and GET requests in Django and the Python Shell

I've encountered an issue with my code where the database is not updating and a new record is not being created. I suspect that there may be a problem with how I am handling the POST data retrieval in my script. Can anyone provide guidance on where to ...

NEXT JS - Application renders twice due to rewrites in place

I'm currently working on a NEXT JS project and facing the issue of the app rendering twice! Challenge After implementing rewrites in next.config.js, the app is being rendered twice. Removing the rewrites solves the issue and only renders once. next ...

What steps can I take to ensure that this list remains fixed at the bottom of the page?

Looking to have this content positioned at the very bottom of my webpage without any empty space below it. I'm having trouble applying the usual CSS to achieve this. .footer li{ display:inline; } <footer> <div cla ...

Developing a fresh browser window with a clickable button using JavaScript

Currently, I am learning JavaScript and trying to create a button on a webpage using the code I wrote in JavaScript. However, instead of adding the button to the page specified by me, it is always added to index.html. I am using WebStorm IDE for this proje ...

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

Saving user-provided arrays with react admin without the need for ArrayInput

Is there a way to input array data into my data structure without using ArrayInput? Here is my current data structure: { id, data: { oilPrice: {day, price}[], gasPrice: {day, price}[], } } On the create page, I have a MUI Sele ...

Caution: Ensuring that every child item in a list possesses a distinct "key" prop is crucial when working with React in TypeScript

Encountering this issue in React (TypeScript): Notification: Each child in a list requires a unique "key" prop. Review the render method of MyCollection Below is the implementation of MyCollection: export default function MyCollection(props:any ) { le ...

Unable to retrieve API data because of an array in React Native

I have developed an API using Laravel that can be tested in Postman (). However, I encountered an issue when trying to fetch data using an example from this tutorial (https://www.youtube.com/watch?v=IuYo009yc8w&t=430s) which dealt with an array in the ...

Dynamic value for textbox using Selenium

While working on building a test case, I encountered a problem with a search text box on my web page. The Selenium IDE was used to record the actions taken. type | id=search_input_char_name_136 | myproduct // textbox for search click | css=button.oe_ ...

Is it possible to modify the background color of the firefox address bar according to the type of protocol being used?

Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates. ...

Footer button overrides list components due to improper implementation of vertical ion-scroll

Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...