<p class="title"><code>padding-block-end: 40px;</code></p>
<div class="container">
  <div class='box'>
  <p class="text horizontal-tb">This is the box with style of <code>horizontal-tb</code> as its writing mode</p>
</div>

<div class='box'>
  <p class="text vertical-rl">This is the box with style of <code>vertical-rl</code> as its writing mode</p>
</div>
  
  <div class='box'>
  <p class="text vertical-lr">This is the box with style of <code>vertical-lr</code> as its 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-end: 40px;
}

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

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

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