JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item-group">
      <div class="item">item 1</div>
      <div class="item">item 2</div>
      <div class="item">item 3</div>
  </div>
	
	<div class="block">block</div>
	
  <div class="item-group">
    <div class="item">item 4</div>
    <div class="item">item 5</div>
    <div class="item">item 6</div>
  </div>
</div>

CSS

* {
    box-sizing: border-box;
}

.items {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
}

.item-group {
    background: #ccc;
    max-width: 33.333%;
    width: 33.333%;
    border: 1px solid #999;
    padding: 15px;
    cursor: pointer;
}

.item:hover {
    background: #000;
    color: #fff;
}

.block {    
    background: #00f;
    padding: 15px;
    color: #fff;
	margin: 15px 0;
	width: 100%;
	max-width: 100%;
}

.active,
.active:hover {
    background: #00f;
    color: #fff;
    cursor: text;
}

JavaScript

(function() {

    $('.item-group').on('click', function() {
        $('.active').removeClass('active');
        $(this).addClass('active');
        
        $('.block').appendTo($(this));
    });
	
	

})();