Propiedades lógicas

Las propiedades lógicas describen el layout según la dirección de escritura y no según izquierda o derecha. Tu diseño se adapta solo a idiomas como el árabe o el japonés.

inline: eje en el que fluye el texto. En español es el horizontal.
block: eje en el que se apilan los bloques. En español es el vertical.
margin-inline, padding-block: sustituyen a los márgenes y rellenos físicos de cada eje.
inline-size, block-size: equivalen a width y height en la escritura horizontal.
inset-inline-start: es el equivalente lógico de left en idiomas que se escriben de izquierda a derecha.

Ejemplo

Cambia direction y writing-mode. Como la clase item usa propiedades lógicas, su separación sigue el sentido de la escritura en todos los casos.

Selecciona direction:

ltrrtl

Selecciona writing-mode:

horizontal-tbvertical-rlvertical-lr

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child item">1</div>
  <div class="child item">2</div>
</div>

<div class="container">
  <div class="child item">1</div>
  <div class="child item">2</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  block-size: 13rem;
  direction: ltr;
  padding: 0.5rem;
  writing-mode: horizontal-tb;
}

.item {
  inline-size: fit-content;
  margin-block-end: 0.5rem;
  margin-inline-start: 4rem;
  padding-block: 1rem;
  padding-inline: 2rem;
}

.container {
  border: 1px solid #2b7de0;
  block-size: 13rem;
  direction: ltr;
  padding: 0.5rem;
  writing-mode: horizontal-tb;
}

.item {
  inline-size: fit-content;
  margin-block-end: 0.5rem;
  margin-inline-start: 4rem;
  padding-block: 1rem;
  padding-inline: 2rem;
}

Edita el código o usa los selectores: el resultado cambia al instante.