Инструменты разработчика браузера: CSS Grid не очень хорошо согласуется с RTL

Question

Как выровнять CSS-сетку в браузере devtools с RTL?В браузере:

НО, при проверке элемента:

Граница из devtools (F12) не подходит для вывода в браузере. Как это исправить?

.wrapper {
  display: grid;
  grid-template-columns: 300px 1fr;
}

.col1 {
  background: red;
  height: 100px;
}

.col2 {
  background: blue;
  height: 100px;
}

<div dir="rtl">
  <div class="wrapper">
    <div class="col1"></div>
    <div class="col2"></div>
  </div>
</div>

Answer 1

удалить dir = 'rtl' из родительского div и добавить float: left для .col1 и .col2.как показано ниже: .col1 {background: red;высота: 100px;float: left} .col2 {фон: синий;высота: 100px;float: left}