How to align Material-UI Skeleton and responsive?

Question

I was trying to align material-UI-skeletons inside a Paper to the left from the last two days, so at last, I found the answer but if you have another way to solve this problem please answer below

 <Paper className={styles.container}>
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
        <Skeleton variant="text" width="20%" />
      </Paper>

Answer 1

import React from "react";
import Skeleton from "@material-ui/lab/Skeleton";
import styles from "./demo.module.css";
import { Paper } from "@material-ui/core";

export default function Variants() {
  return (
    <div>
      <Paper className={styles.container}>
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text"  className={styles.text} />
        <Skeleton variant="text" className={styles.text}/>
        <Skeleton variant="text" className={styles.text} />
        <Skeleton variant="text" className={styles.text}/>
      </Paper>
  );
}

.text {
  width: 100px !important;
  display: flex;
  justify-self: flex-end;
  margin-right: 10px;
}

.container {
  display: grid;
  
}

@media screen and (max-width: 600px) {
  .text{
    width: 200px !important;
  }