CSS padding-inline-start Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.box {
  background-color: #f0f4f8;
  border: 2px solid #2d3748;
  margin-bottom: 20px;
  width: 300px;
  
  /* The core property */
  padding-inline-start: 50px;
}

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

/* Extra styling for clarity */
.container {
  font-family: sans-serif;
  padding: 20px;
}</style></head><body><div class="container">
  <div class="box ltr">
    Standard LTR: The padding is on the left.
  </div>

  <div class="box rtl">
    RTL Direction: The padding flips to the right!
  </div>
</div></body></html>