html - 将 p 标签对齐到 div 的长度

Question

我正在尝试将 p 标签中的文本对齐到 div 的高度。

如下图所示:

我如何在 css 中做到这一点？

这是 html:

所以预期的结果是文本应该和父div的高度一样长。

  

   body{
       height:100vh;
  }
.about-2 {
  display: grid;
  grid-template-columns: 5% 90%;
  column-gap: 5%;
  height: 100%;
  position: relative;
}

 .about-2 .skills-text p {
  transform: rotate(270deg);
  transform-origin: 0 0;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.5em;
  color: #face6f;
  padding-left: 35px;
}

<div class="about-2">
  <div class="skills-text">
    <p class="dash">My skills</p>
  </div>

  <div class="skillset">
    <div>skill 1</div>
    <div>skill 1</div>
    <div>skill 1</div>
    <div>skill 1</div>
  </div>
</div>

Answer 1

我猜大概是这样的:

body {
  background: #0c0c0c;
  color:      #eee;
  padding:    24px;
}

.about {
  display:               grid;
  grid-template-columns: min-content 1fr;
  grid-gap:              24px;
}

.title {
  display:      flex;
  align-items:  center;
  margin:       0; 
  font-size:    1.4em;
  color:        #face6f;
  text-align:   end;
  writing-mode: vertical-lr;
  transform:    scale(-1);
}

.title::before {
  display:          block;
  content:          '';
  flex:             1 1 auto;
  width:            2px;
  margin-bottom:    6px;
  background-color: #face6f;
}

.skillset, .skillset-item {
  list-style: none;
  margin:     0;
  padding:    0;
}

.skillset {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:              24px;
}

.skillset-item { padding-top: 12px; }

.skillset-item::after {
  display:          block;
  content:          '';
  width:            100%;
  height:           3px;
  background-color: #face6f;
  margin-top:       12px;
}

<div class="about">
  
  <h3 class="title">My skills</h3>
  
  <ul class="skillset">
    <li class="skillset-item">skill 1</li>
    <li class="skillset-item">skill 2</li>
    <li class="skillset-item">skill 3</li>
    <li class="skillset-item">skill 4</li>
  </ul>
</div>