<div class="content1">
  <div dir="ltr" class="box">
    <p>Rendu d'une mise en page avec des propriétés <strong>CSS physiques</strong> sur un texte LTR <em>(Left To Right)</em></p>
  </div>

  <div dir="rtl" class=boxl>
    <p>Rendu d'une mise en page avec des propriétés <strong>CSS physique</strong> sur un texte en RTL <em>(Right To Left)</em></p>
  </div>  

  <div dir="rtl" class=boxr>
    <p>Rendu d'une mise en page avec des <strong>propriétés logiques CSS</strong> sur un texte RTL <em>(Right To Left)</em></p>
  </div>
</div>
body {
  background-color: #1D1E22;
  color: black;
}

.content1 {
  display: flex;
}

.box {
  width: 150px;
  background-color: white;
  padding-top:50px;
  padding-bottom: 10px;
  padding-right:70px;
  padding-left: 10px;
  border-top: #628395 5px solid;
  border-right: #6A994E 5px solid;
  border-bottom: #F4AC45 5px solid;
  border-left: #A5668B 5px solid;
  margin-right: 10px;
}

.boxl {
  width: 150px;
  background-color: white;
  padding-top:50px;
  padding-bottom: 10px;
  padding-right:70px;
  padding-left: 10px;
  border-top: #628395 5px solid;
  border-right: #6A994E 5px solid;
  border-bottom: #F4AC45 5px solid;
  border-left: #A5668B 5px solid;
  margin-right: 10px;
}

.boxr {
  width: 150px;
  background-color: white;
  padding-block-start:50px;
  padding-block-end:10px;
  padding-inline-end:70px;
  padding-inline-start: 10px;
  border-block-start: #628395 5px solid;
  border-inline-end: #6A994E 5px solid;
  border-block-end: #F4AC45 5px solid;
  border-inline-start: #A5668B 5px solid;
}

External CSS

  1. https://fonts.google.com/

External JavaScript

This Pen doesn't use any external JavaScript resources.