<p class="title"><code>padding-block-start: 40px;</code></p>
<div class="container">
  <div class='box'>
  <p class="text horizontal-tb">Top is the starting edge is  when <code>horizontal-tb</code> is the writing mode</p>
</div>

<div class='box'>
  <p class="text vertical-rl">Right is the starting edge when <code>vertical-rl</code> is the writing mode</p>
</div>
  
  <div class='box'>
  <p class="text vertical-lr">Left is the starting edge when <code>vertical-lr</code> is the writing mode</p>
</div>
</div>

body{
  width:100%;
  display:flex;
  align-items:center;
  flex-direction:column;
}

.title {
  text-align:center;
  font-size:20px;
}

.container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1em;
  margin: 2em;
}

.box {
  width: 200px;
  height: 200px;
}

.text {
  border: 3px dashed #ff7a18;
  padding-block-start: 40px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.vertical-lr {
  writing-mode: vertical-lr;
  margin-left: -20px;
}