What is the best way to position one element on the far left and the other element on the far right within the same container?

I am facing an issue with aligning text and icons in a container. I want the text to align far left, and the icons to align far right. Also, the icons should be horizontally oriented according to the length of the text. I have already separated the text and icons into their own div elements.

Below are the CSS properties I am currently using:

    chartInputSymbols: { // this class is for the text
        overflow: "auto",
        float: "right",
    },
    circlePlus: { // this class will be used for the icons
        
    },
}));

This is the structure of my HTML, where I am utilizing react-materialUI components. I have omitted most of the code for brevity.

                        <ListItem>
                             {value}
                            <ListItemIcon>
                                <div style={{ marginLeft: "2rem" }}>
                                <Checkbox/>
                                </div>
                            </ListItemIcon>                              
                        </ListItem>)

https://i.sstatic.net/5BB4E.png

Can anyone suggest how I can neatly position the text on the far left of my container and the icon on the far right, with equal distance between them?

htmlcssmaterial-ui

Answer №1

To achieve this layout, consider utilizing the power of flexbox with the property justify-content: space-between

There are various methods to accomplish this using flexbox; for instance, you can apply margin-left: auto to the element you want to push to the right.

.space-between {
  display: flex;
  justify-content: space-between;
}

.container {
  max-width: 200px;
  border: 1px solid black;
}

.fake-icon::before {
  content: '';
  background-color: rebeccapurple;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: block;
}
<div class="container">
  <div class="space-between">
    <span> Text </span> <span class="fake-icon"> </span>
  </div>
  <div class="space-between">
    <span> Longer Text </span> <span class="fake-icon"> </span>
  </div>
  <div class="space-between">
    <span> A </span> <span class="fake-icon"> </span>
  </div>
</div>

Answer №2

One way to achieve this is by utilizing the flex method as elaborated by another user in their response. Alternatively, you can also utilize the Material-ui List component for similar results. By incorporating the ListItemSecondaryAction element, you can position elements within the list item towards the right side. Learn more about the ListItemSecondaryAction feature here.

<ListItem>
  <ListItemText primary="Single-line item" />
  <ListItemSecondaryAction>
    <Checkbox/>
  </ListItemSecondaryAction>
</ListItem>

To see a demonstration of this functionality in action, check out this live example:
https://codesandbox.io/s/material-demo-forked-gswtl?fontsize=14&hidenavigation=1&theme=dark

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

Enter the [color] HTML5 code and check for compatibility with all the latest web browsers

I am interested in implementing a color picker functionality using the input[color] element in HTML5. I would like to confirm if this method is compatible with all modern browsers. Additionally, I am curious if there are alternative ways to achieve this, ...

htmlbrowser

Incorporate dynamic classes into an HTML list using PHP

I'm struggling to assign consecutive classes to each list item in a list with the 'nav' class. My goal is to give each list item a class of 'nthChild-x', where x corresponds to its position in the list. I'm pretty new to PHP, ...

phphtmldomhtml-lists

Customize the input of MuiSwitch in Material-UI v5

I'm facing an issue where I need to utilize the Switch component from MUI v5 on a website that already has third party CSS affecting the positioning of checkboxes and radios. In the previous version, v4, I was able to address this by using an overrid ...

reactjsmaterial-ui

HTTP request form

I'm currently working on a form that utilizes XMLHttpRequest, and I've encountered an issue: Upon form submission, if the response is 0 (string), the message displayed in the #output section is "Something went wrong..." (which is correct); Howe ...

javascripthtmlformsxmlhttprequest

Grid system that is responsive, while also maintaining a fixed column width

My problem seems simple, but I can't find an easy solution. What I need is to create a grid with fixed widths and a fixed distance between each column. Each column should be 400px wide, and as the browser window is resized, the grid should adjust by ...

htmlcss

The width of PrimeVue InputNumber is too wide for its parent container

I currently have a collection of items in the shopping cart that are displayed using Bootstrap rows and columns. Each item includes a PrimeVue InputNumber component for adjusting the quantity of a specific product within the cart. If you'd like to ex ...

cssvue.jsvuejs3bootstrap-5primevue

Utilize CSS with dynamically created elements

I am currently figuring out how to use my .each() function with a $(document).ready and a click event. Here's what I have so far: $(document).ready(function(){ $(".help-inline").each(function() { $(this).css('display', 'none&apos ...

javascriptjquerycss

How to align two images side by side using CSS: Centering both images side by

Struggling to center two images side by side? Despite efforts, the images always end up stacked vertically. Any tips on achieving the desired side-by-side alignment? Thank you! HTML code <a href="mailto:<a href="/cdn-cgi/l/email-protection" class= ...

css

Guide to making Bootstrap collapsible panels with full-width content that do not affect neighboring columns

I'm currently working on a responsive grid that displays items with expandable details when clicked. My issue is that when one item expands, the elements next to it collapse down, which is not what I want. I want all items to stay at the top and have ...

javascriptjqueryhtmlcsstwitter-bootstrap

"Enhancing User Experience with React Material Data Grid: Implementing Currency Field Sorting

I have a React MUI Data Grid component that receives rows of financial data, but the default sorting is not working properly because there are currency symbols within the cell data. Is there a way to sort the data while ignoring the currency symbol? [ ...

material-uimui-datatable

Maintaining Order with SCSS and Compass - Is it Possible?

Does compiled SCSS using Compass preserve the order of declarations? Can Compass guarantee the order of properties (assuming it's the way Compass operates that determines this)? This is mainly important when there are multiple definitions with the s ...

csssasscompass

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass

Challenges arising from the use of 'position: absolute' in managing relationships between grandparents, parents, and children

Within my React project, all code is enclosed within the root div (grandparent). In my Project.js component, there is a separate div (parent) solely responsible for the background color. This component is then displayed in App.js without any additional d ...

htmlcssreactjs

What is the best method for adding lengthy text into a mySQL database with PHP?

My current setup involves using a basic HTML form and PHP to insert strings into a MySQL Database. This method works well for shorter strings, but I've encountered issues with longer strings. Interestingly, when using phpmyadmin, I can successfully i ...

phphtmlmysqldatabase

Merge JSON object information into tables, including column headings

I am currently facing a challenge in loading multiple JSON files into tables within different divs. Here is the structure of my JSON data: JSON file 1: [ { "id": 12345, "code": "final", "error": "", "data": [ ...

javascriptjqueryhtmljsonappend

Issue with stretched links in Bootstrap 5 specifically affecting certain recurring elements on mobile devices

I am facing an issue with a table that has a few hundred rows generated by a recurring PHP script. Utilizing Bootstrap 5, I am using a stretched link to enable the entire row of the table to be clickable. The functionality works perfectly on desktop and ev ...

htmlcssbootstrap-5mobile-browser

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

Having difficulty removing padding from material-ui TabPane

Here is my TabPane: https://i.stack.imgur.com/Ihxmn.png I've been attempting to eliminate the padding. Some suggestions on SO led me to try this: <TabPanel value={value} index={i} classes={{ "& .MuiBox-root" ...

cssmaterial-ui

The Mui Autocomplete feature indicates that the onChange value has the capability to be

When rendering a MUI Autocomplete with a custom type, the issue arises as shown below: type Option = { label: string; value: string }; return ( <MuiAutocomplete<Option, true, any, true> freeSolo={true} onChange // says value can be typ ...

reactjsmaterial-ui

Search for "conditions" in a basic HTML DOM parser

I encountered an issue when trying to parse information from a website using simple HTML DOM parser. My code looks something like this: <li> <p class="x"></p><p>..</p> <p>..</p> <p>..</p> <p class ...

phphtmlparsingdom