CSS inset-block-start Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.example {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  padding: 24px;
  background: #f3f6fb;
}

.container {
  position: relative;
  width: 360px;
  height: 120px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e6e9ee;
  margin: 16px 0;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.04);
}

.container.rtl {
  direction: rtl;
}

.box {
  position: absolute;
  inset-block-start: 24px;     /* logical start on the block axis (top in LTR/English) */
  inset-inline-start: 24px;    /* logical start on the inline axis (left in LTR, right in RTL) */
  inline-size: 200px;
  block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3778c2, #2a5f9e);
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(41, 58, 86, 0.12);
  font-weight: 600;
}
</style></head><body><div class='example'>
  <h2>inset-block-start examples</h2>

  <div class='container ltr'>
    <div class='box'>LTR: inset-block-start: 24px</div>
  </div>

  <div class='container rtl'>
    <div class='box'>RTL: inset-block-start: 24px</div>
  </div>
</div></body></html>