JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "content">
</div>

SCSS

.content
{
    position: absolute;
    top: 50px;;
    bottom: 50px;
    left: 20px;
    right: 20px;

    grid-area: main;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25em;
    
    max-width: 100vw;
    margin: 0 auto;
    
    background: red;

> .tree 
    {
        flex: 0 0 calc(33.33% - 1.25em);
        display: flex;
        flex-direction: column;

      height: 100%;
        background: green;
        
        &:only-child {
      // Styles for when there is only one article
      flex: 0 1 100%;
      width: 40vw; // Set a max-width for single article for better readability
      margin: auto; // Center the article in the container
    }
 
    // This is how you could manipulate the individual div elements
    &:first-child:last-child {
      // Alternative way to target an only child
      // Add any specific styles here
    }

    &:only-of-type, // Only one article of this type
    &:first-child:nth-last-child(2)
    {
      flex-basis: 40vw; // Adjust the width for two articles
      width: 40vw; // Reset any specific max-width set for single articles
      
    }// First child when there are exactly two children
    &:last-child:nth-child(2) { // Last child when there are exactly two children
      flex-basis: 80vw; // Adjust the width for two articles
      width: 40vw; // Reset any specific max-width set for single articles
    }
    }
}

JavaScript

const content = document.querySelector(".content");

const div = document.createElement("div");
div.classList.add("tree");

content.appendChild(div);

const div2 = document.createElement("div");
div2.classList.add("tree");
div2.style.background = "blue";

content.appendChild(div2); 
/*
const div3 = document.createElement("div");
div3.classList.add("tree");
div3.style.background = "orange";

content.appendChild(div3); 
*/