Struggling to make `align-items="baseline"` function properly

Question

Struggling to make `align-items="baseline"` function properly

I'm encountering an issue with alignment in my sandbox project. Specifically, I want the bottom of texts with different font sizes to be on the same y axis but I can't seem to figure out how to make it happen.

Check out this picture to see exactly what I'm aiming for. The code is provided below as well. Can anyone spot what I might be missing?

DesiredAlignment.png

Link to Sandbox Project

import "@material-ui/core";
import { Box } from "@material-ui/core";

export default function App() {
  return (
    <>
      <Box display="flex" align-items="baseline" flex-direction="row">
        <Box fontSize="2em" fontWeight="600">
          Belinda Carlisle
        </Box>
        <Box>12345678</Box>
      </Box>
    </>
  );
}

html css reactjs flexbox react-typescript

Answer 1

Answer №1

Incorrect field name specified: alignItems="baseline"

Answer 2

Incorrect field name specified: alignItems="baseline"

Answer 3

Answer №2

To achieve a bottom alignment for specific elements, you can apply the style align-self: flex-end;. If you want all elements to be aligned at the bottom, you can use the following CSS:

.MuiBox-root {
    align-self: flex-end;
}

If only certain elements should have this behavior, create a new class with the same style:

.aligned-bottom {
    align-self: flex-end;
}

Update: Remember to import the stylesheet in your App.tsx file:

import "./styles.css";

Include the stylesheet in your project

Answer 4

To achieve a bottom alignment for specific elements, you can apply the style align-self: flex-end;. If you want all elements to be aligned at the bottom, you can use the following CSS:

.MuiBox-root {
    align-self: flex-end;
}

If only certain elements should have this behavior, create a new class with the same style:

.aligned-bottom {
    align-self: flex-end;
}

Update: Remember to import the stylesheet in your App.tsx file:

import "./styles.css";

Include the stylesheet in your project

Struggling to make `align-items="baseline"` function properly

Answer №1

Answer №2

Similar questions

Incorporate a Background Image, which is linked to a website URL, by utilizing an external CSS file within

Having difficulty adjusting the width of a div element

What is the method for achieving the equivalent effect of "background-size: cover" on an <img>?

Using NextJs to pass a prop as a className

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

The Cordova minification tool fails to compress files within the browser platform

The negative z-index is causing issues with my ability to select classes using jQuery

Navigate to the chosen item in material-ui scroll bar

Combining React with a jQuery plugin

Leveraging custom properties in HTML elements with JavaScript

Having difficulty animating the height transition of the NextJS Image component

Creating a scrollable table with CSS: A step-by-step guide

Error occurs when attempting to call a function with a reference value in ReactJS

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

A guide on integrating Pug templating engine with ReactJS

Are none of the page links clickable?

I find the return method in React.component to be quite puzzling

After placing two divs within another div and applying justify content, an unexpected blank space has appeared

Is it possible to load MySQL data into an HTML form?

Utilizing WSGIServer in conjunction with React for managing lengthy script executions