Position the typography component to the right side

Is there a way to align two typography components on the same line, with one aligned to the left and the other to the right? I'm currently using this code but the components are aligned next to each other on the left side.

const customStyles = makeStyles({
  leftText: {
    textAlign: "left"
  },
  rightText: {
    textAlign: "right"
  }
});

function ChooseNewSupport(props) {
    const classes = customStyles();
    return (
        <DialogContent>
        <Typography inline variant="body1" className={classes.leftText}>
          Choose New Support:
        </Typography>
        <Typography inline variant="body1" className={classes.rightText}>
    </DialogContent>
    );
}

Answer №1

When implementing Mui, it is recommended to utilize their props for a smoother design process compared to using custom styles. To structure your content properly, remember to enclose the p elements within a div container. If you opt for Grid, you can take advantage of flex box and set "space-between" to position each element on opposite sides.

<Grid container justify="space-between">  
  <Typography inline variant="body1" align="left">Choose New Support:</Typography>
  <Typography inline variant="body1" align="right>some text</Typography>
</Grid>

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

The default setting for the calendar picker indicator should be enabled

Whenever I hover my mouse over it, an indicator pops up, but I want to make it the default <input type="date" class="form-control" name="Date" [(ngModel)]="opening_date" (ngModelChange)="Operating()" style="width:550px" required> inp ...

Building Next.js with a designated maximum number of processes/threads

I've uploaded a fresh Next.js app to the cloud server using npx create-next-app. However, when I try to run the build script, the server throws an error 'pthread-create: Resource temporarily unavailable'. { "name": "next&quo ...

Javascript: recursive function fails to return existing value

I'm attempting to recursively loop through an array in search of a key that matches a specified regex pattern. Once the condition is met, the loop should halt and return the value of the key. The issue I am facing is that although the loop stops corr ...

Vue plugins that emit events

In the scenario where I have a basic Vue plugin that does not contain any components, but simply provides some methods to the user: export default { install(Vue, options) { // Unrelated tasks go here. } Vue.prototype.$foo = () => { ...

Updating a hyperlink with data dynamically upon clicking a different button using jQuery

I need to create a script that will add the id of 'peter' to the hyperlink of anchor 'jack' when 'peter' is clicked. <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery. ...

Unable to apply the flex-grow property to a column flex box that has a specified minimum height

I am currently working on designing a website layout that harnesses the power of flexbox to fill the entire page with content, even when the content does not fully occupy the length of the page. My approach involves creating a large flexbox container with ...

Is there a way to retrieve a promise from a function that triggers a $http.get request in AngularJS?

Looking for a solution to modify this function: getX: function ($scope) { $http.get('/api/X/GetSelect') .success(function (data) { ... ... }) .error(function (data) { ...

Troubleshooting Axios post request in React with Node.js and MongoDB still unresolved

I've been encountering an Axios error 404 whenever I try to post data to the mongoose database. Can someone take a look at my code and see if there's anything wrong? Below is my modal that contains the front end of the website: AddForm.jsx impo ...

Change a single state property in two separate Redux Reducers

I'm encountering a minor issue with Redux in my application. I need to be able to update the counter property in two different Reducers and have its value synchronized across both reducers (INCREMENT, DECREMENT). I'm fairly new to Redux and strug ...

Retrieving and assigning data values within an Angular JS service

Here is the service I created to fetch user details: angular.module('app') .factory('userDetailService', function($http) { var userData = {}; function getUserDetails(userId) { if (userId) { return $http.get ...

What is the best way to integrate ngx-translate's pipe for global translation?

I'm currently utilizing the ngx-translate package in order to internationalize my Angular application. When translating text using the translate pipe like so: {{ 'title' | translate }} An issue arises when attempting to use this pipe in ot ...

"Utilize Vuejs to establish a binding between two objects when necessary

With the help of moment, my calendar generates 41 days. for (let x = 0; x < 42; x++) { context.add(1, 'd'); let day = { 'date': moment(context), 'events': [] }; } ...

How to evenly size overlay divs with CSS

I currently have two divs positioned on top of each other with the following CSS: div.container { position: relative; min-height: 100%; margin:0; padding:0; background:url('http://www.scratchprogramming.org/img/book.png'); ...

Using Node.js, we can create a program that makes repetitive calls to the same API in a

My task involves making recursive API calls using request promise. After receiving the results from the API, I need to write them into an excel file. Below is a sample response from the API: { "totalRecords": 9524, "size": 20, "currentPage": 1, "totalPage ...

How to retrieve the chosen option from a drop-down menu in WebDriver using JavaScript without relying on the Select Class

Currently, I am in the process of utilizing Webdriver with Java. My goal is to retrieve the selected value from a combobox without relying on the Select class provided by Webdriver. The specific markup that I am dealing with is as follows: <select nam ...

To continue receiving rxjs updates, kindly subscribe if the specified condition is met

Is there a way to check a condition before subscribing within the operator chain? Here's what I have: // parentElem:boolean = false; // the parent elem show/hide; let parentElem = false; // inside the ngAfterViewInit(); this.myForm.get('grandPa ...

Dealing with extended render times in React applications

Currently, I'm working with a limited set of 100 documents per page and utilizing a wrapper component for certain conditional actions. const onClickCheckbox = (order: OrderProps) => { const _ordersToExport = [...ordersToExport]; const ind ...

Failure to validate two dates, even when they are both in date format within AngularJS

Although it may seem silly to ask, I am confused as to why this is not working. Even though all the values appear fine in debug mode. My goal is to display an error if the productionStartFrom date is before the current date. Controller scope.currentDate ...

An ultimate guide to mapping a nested array in React.js

Problem: I am struggling to display the entire content of my array. The goal is to render all elements in the array, but so far I can only get one to show up. I have found that including [key] in the object fields is the only way to generate any output. ...

Angular keeps throwing an error saying "Provider not found" when trying to inject a factory

Issue: Encountering an Unknown Provider Error in Angular App for: UnitProvider <- Unit Error Details: Error: [$injector:unpr] Unknown provider: UnitProvider <- Unit Codepen Link: View LIVE CODE Example I recently came across a fascinating vide ...