JSFiddle - React, Tailwind, and code Playground

by Optimix

HTML

<div class="grid">
  <div class="grid-first">First</div>
  <div class="grid-second">Second (Want till end)</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">5</div>
  <div class="grid-another">6</div>
  <div class="grid-another">7</div>
  <div class="grid-another">8</div>
  <div class="grid-another">9</div>
  <div class="grid-another">10</div>
  <div class="grid-another">11</div>
  <div class="grid-another">12</div>
  <div class="grid-another">13</div>
  <div class="grid-another">14</div>
  <div class="grid-another">15</div>
</div>

<p>Click the 2nd column to make it filling a whole row</p>

CSS

body {
  font-family: sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: #34495e;
  color: #FFFFFF;
  grid-auto-flow: dense;
}

.grid-second {
  grid-column: 2 / -1;
  background-color: #27ae60;
}

.grid-second.wide {
   grid-column: 1 / -1;
}

/* Not important fancy styles */
.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}
.grid-another {
  background-color: #3498db;
  border: 1px solid #34495e;
}

JavaScript

$('.grid-second').click(function() {
	$(this).toggleClass('wide');
});