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

The process of downloading a webpage onto a computer is not completely successful

Modify the `value` of the `<input type=color>` element

Generate listview items containing anchor tags automatically

A guide to implementing previousState in React hooks with TypeScript

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

The quantity of elements stays constant even after adding to them using Javascript

I am encountering an issue where I am unable to send a function to the client component in

Finding the value of a radio button dynamically created by jQuery

Obtain offspring from a parent element using jQuery

What is the most efficient method for line wrapping in the react className attribute while utilizing Tailwind CSS with minimal impact on performance?

Avoiding a constantly repeating video to prevent the browser from running out of memory

Adding a component dynamically with a link click in Angular: A step-by-step guide

What is the process for sending an email to a designated recipient through an HTML form and then storing it as a record in an HTML table?

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

Creating personalized buttons for HTML dropdowns in PhoneGap

Navigating from the NextJS 14 page and sending data through router.push in next/navigation

Debugging server-side functionality in ReactJS

Showcase a Pair of Files Next to Eachother using HTML

JQuery Label Click Problem with Selecting All Check Boxes

Is there a way for me to determine if I am accurately interpreting the content on websites?