Как повернуть текст внутри блока div чтобы он не выходил за границы блока

Question

Не получается отобразить слева посередине блока слова: "важно" и "не важно"

* {
  margin: 0;
  padding: 0;
}

.main {
  width: 80%;
  height: 80vh;
  margin: 0 auto;
  background: #aca3a3;
  margin-top: 50px;
}

.main>.row {
  display: flex;
  justify-content: space-between;
  height: 37vh;
}

.main>.row .col_v {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
}

.main>.row .col {
  width: 45%;
  border: 2px solid red;
}

.main>.row .col_v {
  width: 30px;
}

.main>.row p {
  transform: rotate(-90deg);
  background: greenyellow;
  vertical-align: middle;
}

.main>.row_f {
  display: flex;
  justify-content: space-around;
}

<pre>
        <div class="main">
            <div class="row">
                <p>важно</p>
                <div class="col">важно не срочно 3</div>
                <div class="col">важно срочно 1</div>
            </div>
            <div class="row">
                <p>не важно</p>
                <div class="col">не важно не срочно 4</div>
                <div class="col">не важно срочно 2</div>
            </div>
            <div class="row_f">
                <div class="col">не срочно</div>
                <div class="col">срочно</div>
            </div>
        </div>
    </pre>

Answer 1

Как вариант обернуть <p> в <div>:

.main>.row .heading {
  display: flex;
  justify-content: center;
  align-items: center;
  background: greenyellow;
}

.main>.row p {
  transform: rotate(-90deg);
}

<div class="row">
  <div class="heading">
    <p>важно</p>
  </div>
  <div class="col">важно не срочно 3</div>
  <div class="col">важно срочно 1</div>
</div>

Получается довольно приемлемый результат.

БЛОГ НА HUSL

Как повернуть текст внутри блока div чтобы он не выходил за границы блока

Ответы (1 шт):