I am presenting some data in a grid. The problem is that it is not responsive,when i minimize the page, the textarea part goes out and the delete and edit buttons too.How can this be solved and also to make the cols for the textarea fit to the content?

Parent Component

 <div className='container tbl' style={{marginTop:'20px'}}>  
                {Object.entries(rules).map((rule) => (
                     <Rules key= {rule[0]} rules={rule} onLoad={getRules}/>
                ))}    
            </div>

Child Component

export default function Rules({rules, onLoad}:{rules:string[],onLoad:()=>void}) {
    
  return (
        <div key={rules[0]} className='tbl_rules'>
            <div className='box-1'><h6>{rules[0]}</h6></div>
            <div ref={focusDiv} className='box-2'>
                <RulesText />
            </div>
            <div className='box-3'>
            <button 
                id={rules[0]}
                type="button" 
                className="btn btn-sm btn-danger"
                onClick={onDeleteHandler}
                ><RiDeleteBin5Fill className='rules_icon'/>Delete</button>
            </div>
            <div className='box-4'>
                <button 
                id={rules[0]}
                type="button" 
                className="btn btn-sm btn-info"
                value={isEditing ? 'Save' : 'Edit'}
                onClick={onEditHandler}
                >
                <RiEdit2Fill className='rules_icon'/>{isEditing ? 'Save' : 'Edit'}</button>
            </div>
        </div>
  )
}

Child Component

export default function RulesText({ruleText, readOnlyStatus}:{ruleText:string, readOnlyStatus:boolean) {
    
    const[textValue, setTextValue] = useState(ruleText)
    
    return (
        <textarea  
            rows={5}
            cols={50}
            readOnly={readOnlyStatus}
            value={textValue}
           />
  )
}

CSS

.tbl {
  background-color: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.87);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  margin-bottom: 30px;
}
[class^="box-"] {
  display: grid;
  place-items: center;
  margin: 10px;
}
.tbl_rules {
  display: grid;
  grid-template-columns: 150px 400px 100px 100px;
  border-bottom: 1px solid #80808059;
}
.rules_icon {
  margin-right: 2px;
  margin-bottom: 4px;
}