What is the process for aligning Item1 to the left and Item2 & Item3 to the right using MUI React?

I'm working on a component that contains three different Typography components. I need to align "summary" to the left, while 'miles' and 'duration' should be aligned to the right.

https://i.stack.imgur.com/7e9sY.png

Here's the code snippet:

<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='flex-end'>
    <Box align='left'>
        <Typography>Summary</Typography>
    </Box>
    <Box>
        <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
    </Box>
    <Box>
        <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
    </Box>
</Stack>

I've experimented with the justifyContent attribute but haven't had any luck. As someone new to CSS and styling, I'm unsure of the best way to approach this situation.

javascriptcssreactjsmaterial-ui

Answer №1

<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='space-between'>
    <Box align='left'>
        <Typography>Overview</Typography>
    </Box>
    <Stack direction="row" justifyContent={"flex-end"} spacing={1}>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
      </Box>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
      </Box>
    </Stack>
</Stack>

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

Transfer information between two devices remotely through AJAX

I am in the process of developing a web application that utilizes a mobile phone as a controller, similar to this example: . The concept is quite simple - I just need to transfer text entered on the phone to the computer. There is no need for a database, ...

javascriptphpjqueryajaxjson

Challenges with window opening function while already in fullscreen view

Unsure of what might be causing the issue, but here's the problem... My code to open a new window is as follows: var opts = 'location=0,toolbar=0,menubar=0,scrollbars=0,resizable=0,height=450,width=300,right=350'; window.open('/' ...

javascriptjqueryuser-interfacewindow.open

Ways to enhance the value of an option within a drop-down menu in angular js 1.x and retrieve the selected value

Can someone help me convert this jQuery code to AngularJS 1.x? <select id="select"> <option value="1" data-foo="dogs">this</option> <option value="2" data-foo="cats">that</option> <option value="3" data-foo="gerbil ...

javascriptjqueryangularjs

I seem to be having trouble using my markers on my istamap

function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new ...

javascriptphpjquerygoogle-maps

Terminate all dormant MySQL pool connections using Node.js

In my project involving node.js and connection pooling, I have noticed that despite releasing connections after each query as shown below: return new Promise((resolve, reject) => { sql.getConnection(function (err, conn) { if (err) { ...

javascriptmysqlnode.jsdatabaseconnection-pooling

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

javascriptjqueryhtml

Utilize Ionic and Angular to display the local storage value within a text box

I am in the process of developing an application using the Ionic framework. I am able to upload files to the server and receive a response, which I then save the file name in localstorage. However, I am facing an issue where I need to display this value in ...

javascriptangularjsionic-frameworklocal-storage

Types of Data Encoded in Base64

Within an application I am developing, there is a feature for downloading files that are stored as Base64 strings. It is essential to correctly pair the data types with the corresponding files in order to ensure successful downloads. I thought I had sorte ...

javascriptbase64

Achieving effective targeting of the second segment within a string enclosed in a span tag through increased specificity

When it comes to styling elements, the easiest way is to use classes and assign the properties needed. However, 1. I'm not a huge fan of creating classes all over the place. That's what specificity and CSS mapping are for. 2. Going thro ...

htmlcsscss-selectorscss-specificity

Do all the data get stored in Next.js SSR caching or just the data that is returned?

Working with an API that offers pagination but lacks the ability to sort data according to client requirements, I had to come up with a workaround. My solution involves fetching all the data from the API within getServerSideProps and returning only a subse ...

reactjscachingnext.jsserver-side-renderinggetserversideprops

Registering the service worker resulted in an error stating "Undefined is not a function"

When attempting to register a service worker using default React code, I discovered that some users were encountering a `TypeError: undefined is not a function` on the line `.then(registration => {` inside the registerValidSW function. Although it works ...

javascriptreactjstypeerrorservice-workerprogressive-web-apps

What are the steps to implement infinite scrolling in a Vue.js application?

Currently, I am attempting to implement an infinite horizontal scroll section in vuejs for a selection of products. However, I am facing difficulties achieving the infinite effect. My approach so far involved removing the card that goes out of view and add ...

javascriptcssvue.jsnuxt.jscarousel

Can the AJAX URL be loaded onto a new page?

https://i.stack.imgur.com/5l63v.pngPardon the poorly phrased question, but I need some guidance on a specific requirement regarding opening a URL in a new page. Currently, I have designed an AJAX URL and I'm wondering if it's possible to open thi ...

javascriptajax

locate an inner div element

Here are two div elements: <body> <div id="divParent"> <div id="divChild"></div> </div> </body> What is the best way to select the divChild element using JavaScript? ...

javascripthtmldom

Displaying a component following data retrieval in Vue.js

I am currently working on consuming an API using axios. Here is the code I have so far: <select> <option v-for="value in values"> value.name </option> </select> // js data(){ values: [], }, create ...

javascriptvue.jsaxiospromise

Ensuring Consistent Headings While Scrolling

Imagine having headings structured like this: <h1 class="fixontop">heading 1</h1> content goes here. . . . long paragraph. <h1 class="fixontop">heading 2</h1> 2nd content goes here. . . . long paragraph. <h1 class="fixontop"> ...

javascriptjquerycss

Troubleshooting: Issue with selecting items in jQuery Datatables

While attempting to construct a jQuery datatable using a data object, I encountered an issue. The table is displayed correctly, but the selection feature within the datatable is not functioning as intended. My expectation was that when a row is selected, i ...

javascriptjquerydatatables

Step-by-step guide on creating a personalized logic and redirecting to different pages using the useEffect hook in React or Next.js

I have recently developed a quiz application with three main pages - Junior, Senior, and SuperSenior. Depending on the selection made by the user from the dropdown menu on the homepage, I need to redirect them to the appropriate page. To achieve this func ...

reactjsnext.js

Empty nested Map in POST request

I am currently working on a springboot application with a React/Typescript frontend. I have defined two interfaces and created an object based on these interfaces. export interface Order { customer_id: number; date: Date; total: number; sp ...

javascriptjsonreactjstypescriptfetch

The pop-up fails to appear

Could you assist me in identifying the issue with my code? <script type="text/javascript"> function PopupCenter(pageURL, title,w,h) { var left = (screen.width/2)-(w/2); var top = (screen.height/2)- ...

javascriptphphtml