I am in the process of developing a react app and I have encountered an issue with aligning the field names horizontally with their corresponding field values in multiple columns. Despite my efforts, the alignment still appears to be a bit off. Below is the code I have been using:
Task class:
return (
<div >
<div>
<a className="clientparams1">{task.clientName} </a>
</div>
<div>
<a className="clientparams1">{task.clientId}</a>
</div>
<div>
<a className="clientparams1">{task.clientSecret}</a>
</div>
<div>
<a className="clientparams1">{task.status}</a>
</div>
<div>
<a className="clientparams1">{task.generated_on}</a>
</div>
</div>
);
};
export default Task;
Tasks class:
This class contains the headings for the fields.
return (
<div>
<div className="form1">
<div>
<a className="clientparams1">clientName</a>
</div>
<div>
<a className="clientparams1">clientId</a>
</div>
<div>
<a className="clientparams1">clientSecret</a>
</div>
<div>
<a className="clientparams1">status</a>
</div>
<div>
<a className="clientparams1">generated_on</a>
</div>
</div>
{tasks.map((task, index) => (
<Task key={index} task={task} onDelete={onDelete} />
))}
</div>
)
}
The structure of the code includes a parent div with 2 child divs. The first child div contains all the field names while the second child div holds all the corresponding values.
Below are the css classes utilized in the code:
.clientparams{
margin: 40px;
height: 30px;
width: 250px;
font-size: medium;
}
.form1{
display: flex;
}
.main_container{
display: inline-block;
justify-content: center;
align-items: center;
flex-wrap: wrap;
text-align: justify;
}
If anyone can provide a solution or assistance with this alignment issue, it would be greatly appreciated. Thank you.