JSFiddle - React, Tailwind, and code Playground

HTML

<p>Somehow I need to get these boxes aligning up against the red border on both the right and left edges :/!</p> <br />

<div id="area1" class="connectedSortable">
        
        <div class="block"><span style="font-size:3em; color:#CCC;">1</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">2</span></div>

        <div class="block"><span style="font-size:3em; color:#CCC;">3</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">4</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">5</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">6</span></div>
        
    </div>

 <div id="area2" class="connectedSortable">
        
        <div class="block"><span style="font-size:3em; color:#CCC;">7</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">8</span></div>

        <div class="block"><span style="font-size:3em; color:#CCC;">9</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">10</span></div>
        <div class="block"><span style="font-size:3em; color:#CCC;">11</span></div>
        
    </div>

CSS

#area1, #area2 {
 border:1px solid red; 
 float:left;
 width:680px;
 margin-bottom:15px;
 background:#ccc;
}

.block:nth-child(3n+3) { margin-right: 0 ; float: right;}

.block {
    background:green;
    width:32%;
    float: left;
    height:200px;
    margin-right:2%;
    margin-top:10px;
}

JavaScript

$(function() { 
      
    $( ".connectedSortable ").sortable({
        connectWith: ".connectedSortable"
    });
      
    $( ".connectedSortable" ).disableSelection();   
      
  });