JSFiddle - React, Tailwind, and code Playground
HTML
<main>
<ul>
<li>
<p>1</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>3</p>
</li>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
<li>
<p>7</p>
</li>
<li>
<p>8</p>
</li>
<li>
<p>9</p>
</li>
<li>
<p>10</p>
</li>
<li>
<p>11</p>
</li>
<li>
<p>12</p>
</li>
<li>
<p>13</p>
</li>
<li>
<p>14</p>
</li>
<li>
<p>15</p>
</li>
<li>
<p>16</p>
</li>
<li>
<p>17</p>
</li>
<li>
<p>18</p>
</li>
<li>
<p>19</p>
</li>
<li>
<p>20</p>
</li>
<li>
<p>21</p>
</li>
<li>
<p>22</p>
</li>
<li>
<p>23</p>
</li>
<li>
<p>24</p>
</li>
<li>
<p>25</p>
</li>
<li>
<p>26</p>
</li>
<li>
<p>27</p>
</li>
<li>
<p>28</p>
</li>
<li>
<p>29</p>
</li>
<li>
<p>30</p>
</li>
<li>
<p>31</p>
</li>
<li>
<p>32</p>
</li>
<li>
<p>33</p>
</li>
<li>
<p>34</p>
</li>
<li>
<p>35</p>
</li>
<li>
<p>36</p>
</li>
<li>
<p>37</p>
</li>
<li>
<p>38</p>
</li>
<li>
<p>39</p>
</li>
<li>
<p>40</p>
</li>
<li>
<p>41</p>
</li>
<li>
<p>42</p>
</li>
<li>
<p>43</p>
</li>
<li>
<p>44</p>
</li>
<li>
<p>45</p>
</li>
<li>
<p>46</p>
</li>
<li>
<p>47</p>
</li>
<li>
<p>48</p>
</li>
<li>
<p>49</p>
</li>
<li>
<p>50</p>
</li>
<li>
<p>51</p>
</li>
<li>
<p>52</p>
</li>
<li>
<p>53</p>
</li>
<li>
<p>54</p>
</li>
<li>
<p>55</p>
</li>
<li>
<p>56</p>
</li>
<li>
<p>57</p>
</li>
<li>
<p>58</p>
</li>
<li>
<p>59</p>
</li>
<li>
<p>60</p>
</li>
<li>
<p>61</p>
</li>
<li>
<p>62</p>
</li>
<li>
<p>63</p>
</li>
<li>
<p>64</p>
</li>
<li>
...
CSS
*{
padding:0;
margin:0;
}
main{
float:left;
border:1px solid #adadad;
text-align: right;
padding:5px 5%;
min-width: 60%;
}
aside{
margin-left:20px;
float:left;
}
ul{
list-style: none;
}