Display list of items rotated and vertical aligned in bottom-CodePudding

Im having a list of texts on different length which should be firstlly rotated and than aligned in bottom. The space betwen them should be equally and not depended on the word length.

Below is an example

#outer {
  line-height: 200px;
  height: 200px;
  text-align: center;
  width: max-content;

}

#text {
  transform: rotate(-45deg);
  line-height: 1.5;
  display: inline-block;
  vertical-align: bottom;
  bottom: 30px;
  position: relative;

}

  <div id="outer">
      <span id="text">My Vertical Text</span>
    <span id="text">My  Text</span>
    <span id="text">My Vertical Text</span>
    <span id="text">a</span>
    <span id="text">My Vertical Text number 4</span>
    <span id="text">helooo</span>
 
  </div>

CodePudding user response：

.outer {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: end;
  justify-content: space-evenly;
  position: absolute;
  bottom: 0;
  left: 0;
}

.text {
  transform: rotate(-45deg);
  transform-origin: 0 0;
  display: inline-block;
  width: 20px;
  position: relative;
  white-space: nowrap;
}

<html>
  <body>
    <div >
      <span >My Vertical Text</span>
      <span >My Text</span>
      <span >My Vertical Text</span>
      <span >A</span>
      <div >My Vertical Text number 4</div>
      <span >helooo</span>
    </div>
  </body>
</html>