VSplit.tsx

import React from 'react';

const VSplit = (props: {
  left: any,
  right: any,
  split?: number
}) => {
  const split = props.split ?? .5;

  if(split <= 0 || split >= 1) {
    throw new Error("VSplit has an invalid split");
  }

  return (
    <div className={"flex flex-row w-full h-full gap-6"}>
      <div style={{width: `${split * 100}%`}}>
        {props.left}
      </div>
      <div className={"flex-1"}>
        {props.right}
      </div>
    </div>
  );
};

export default VSplit;