Translating Cubes to touch corners diagonally

The issue I’m having is I am trying to have 7 cubes in which they are translated vertically. Then they are rotated by 20 degrees with respect to each other. Then I need to exactly have the edges of the cubes touch. What I mean is I need the bottom right edge of the next cube to touch the top left edge of the previous cube. Heres my code to attempt to do that, which is fairly close, however not exact. Note I am coding this in Three.js

//*Note p is the length of my cubes that I have defined elsewhere in my code
function touchingCornerTranslationMatrix(modelTransformation, p) {
    const l = p/6;
    // define local positions for top-right and bottom-left corners of the cube in local space
    const bottomLeft = new THREE.Vector3(-l, -l, 0);  // Bottom-left corner in local space
    const topRight = new THREE.Vector3(l, l, 0);       // Top-right corner in local space

    // apply the current transformation matrix to both corners
    bottomLeft.applyMatrix4(modelTransformation);
    topRight.applyMatrix4(modelTransformation);

    // compute the translation needed to align bottom-left of next cube with top-right of previous cube
    const xTranslation = topRight.x - bottomLeft.x;
    const yTranslation = topRight.y - bottomLeft.y;

    // return the translation matrix to apply
    return translationMatrix(xTranslation, yTranslation, 0); // Use positive translations
}

And heres my implementation of it also including the rotation and translation, which must be done first.

const rotation = rotationMatrixZ(20 * Math.PI/180); //rotation matrix by 20 degrees
const translation = translationMatrix(0, 2*l, 0); // Translate 2l units in the y direction
let model_transformation = new THREE.Matrix4(); // model transformation matrix we will update
let previousPosition = new THREE.Vector3();
let touching = touchingCornerTranslationMatrix(model_transformation, l);

for (let i = 0; i < cubes.length; i++) {

    //change to matrix.copy
    cubes[i].matrix.copy(model_transformation);
    //shifting vertically
    model_transformation.multiplyMatrices(translation, model_transformation); 
    //rotating by 20 degrees
    model_transformation.multiplyMatrices(rotation, model_transformation); 
    //shifting it so that they now touch corners
    model_transformation.multiplyMatrices(touching, model_transformation);

    //for debugging 
    let position = new THREE.Vector3();
    position.setFromMatrixPosition(model_transformation);
    console.log("Current Position: ", position);
    console.log("Previous Position: ", previousPosition);
    console.log(" ");

    previousPosition.copy(position);

}

Heres a picture for reference of what I have right now:

Visual Cube Rotation
Any help would be greatly appreciated thank you!

I tried to change the direction in which I am doing the translation aka matrix multiplication however, that didn’t work. I’m fairly certain my implementation is along the right lines, however my function doesn’t seem to be correct, I also tried to subtract my xtranslation by saying instead bottomleft.x – topright.x however that sueded me to the right which isn’t what i want.