JSFiddle - React, Tailwind, and code Playground

by ecoblack

HTML

<div class="grid-container">
  <div class="grid-item"><style>
.lgrid-container {
  display: grid;
  grid-template-columns: 100px auto;
  background-color: #2196F3;
  
}
.lgrid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  
  font-size: 30px;
  text-align: left;
}
</style>

<div class="lgrid-container">
  <div class="lgrid-item">1</div>
  <div class="lgrid-item l" style="max-width:250px;">Bacon ipsum dolor amet jowl rump doner ribeye cupim andouille bresaola brisket shoulder spare ribs short ribs cow ham hock. Bacon ipsum dolor amet jowl rump doner ribeye cupim andouille bresaola brisket shoulder spare ribs short ribs cow ham hock</div>
  

</div>
</div>
  <div class="grid-item">2</div>
  <div class="grid-item"><style>

</style>

<div class="rgrid-container">
  <div class="rgrid-item r" style="max-width:250px;text-align:right;" >Bacon ipsum dolor amet jowl rump doner ribeye cupim andouille bresaola brisket shoulder spare ribs short ribs cow ham hock. Bacon ipsum dolor a</div>
  <div class="rgrid-item">2</div>
  

</div></div>  
</div>

CSS

.grid-container {
  display: flex;
  
  background-color: #2196F3;

}
.grid-item {
  background-color: rgba(255, 0, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);

  font-size: 30px;
  
}

.rgrid-container {
  display: grid;
  grid-template-columns: auto 100px;
  background-color: #2196F3;
  
}фы
.rgrid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
 
  font-size: 30px;
  
}