<p class="title"><code>padding-block: 20px;</code></p>
<div class="container">
  <div class='box'>
  <p class="text text1">The starting edge is top and ending edge is bottom when <code>horizontal-tb</code> is the writing mode</p>
</div>

<div class='box'>
  <p class="text text2">The starting edge is right and ending edge is left when <code>vertical-rl</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: 2em;
  margin: 2em;
}

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

.text {
  background: #fff;
  border: 3px dashed #ff7a18;
  padding-block: 20px;
}

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

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