How to Align Text Regardless of Number of Characters

Question

I have a CSS problem to align the texts in the top and bottom column regardless of the character size.

My problem is that the character size is different, so the texts are misaligned and I'm not finding a way to make them align.

Can you help me?

Codesandbox: https://codesandbox.io/s/sad-maxwell-h8vin5?file=/src/App.js

Answer 1

Using grid is the best way to accomplish this because it allows you to control the layout in both directions -- horizontally and vertically. With MantineUI, you can use the SimpleGrid component.

It's important to remember that each component in Mantine is associated with a specific set of CSS properties, so choosing a particular component has the purpose of applying those styles rather than organizing your code. Below is an example of how you can remove the extraneous Mantine components to produce cleaner, more maintainable code and output. (Demo here).

//App.js
import { Fragment } from "react";
import {
  MantineProvider,
  Divider,
  Paper,
  SimpleGrid,
  Text,
  Title
} from "@mantine/core";
import { data } from "./data.js";

export default function App() {
  const breakpoints = [
    { maxWidth: "60rem", cols: 3, spacing: "md" },
    { maxWidth: "40rem", cols: 2, spacing: "sm" },
    { maxWidth: "30rem", cols: 1, spacing: "sm" }
  ];

  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Paper shadow="xs" radius="xs" p="1rem" m="1rem">
        <Title order={2}>Conta</Title>
        <Text size="sm" color="violet-purple.0" fw={700} mb="lg">
          Restaurante Vila do Fausto Ltda
        </Text>
        <Divider size="xs" variant="dotted" />
        {data.map((section) => (
          <Fragment key={section.title}>
            <Title order={5} my="lg">
              {section.title}
            </Title>
            <SimpleGrid cols={4} spacing="lg" mb="lg" breakpoints={breakpoints}>
              {section.content.map((item) => (
                <div key={item.heading}>
                  <Text color="#7C9599" fw={700} size="sm">
                    {item.heading}:
                  </Text>
                  <Text size="0.8rem">{item.details}</Text>
                </div>
              ))}
            </SimpleGrid>
          </Fragment>
        ))}
      </Paper>
    </MantineProvider>
  );
}


//data.js
export const data = [
  {
    title: "Informações Gerais",
    content: [
      { heading: "Nome da Empresa", details: "Lorem Ipsum" },
      { heading: "CPF / CNPJ", details: "Lorem Ipsum" },
      { heading: "Razão Social ", details: "Lorem Ipsum" },
      { heading: "E-mail", details: "Lorem Ipsum" },
      { heading: "Telefone", details: "Lorem Ipsum" },
      { heading: "Natureza Jurídica", details: "Lorem Ipsum" },
      { heading: "NIRE", details: "Lorem Ipsum" },
      { heading: "Orgão de Registro ", details: "Lorem Ipsum" }
    ]
  },
  {
    title: "Endereço Principal",
    content: [
      { heading: "Logradouro", details: "Lorem Ipsum" },
      { heading: "Número", details: "Lorem Ipsum" },
      { heading: "Bairro", details: "Lorem Ipsum" },
      { heading: "Cidade", details: "Lorem Ipsum" },
      { heading: "Estado", details: "Lorem Ipsum" },
      { heading: "Complemento", details: "Lorem Ipsum" },
      { heading: "CEP", details: "Lorem Ipsum" }
    ]
  }
];