1. Sources of demand

The company needed to complete a requirement, and used several descriptions to perform data display. However, it was found that the column width of different Descriptions would be different according to the content length (as shown in the following figure), so you need to manually set uniform alignment. The first thing everyone thought was to change the style of antD component, but after finding the corresponding element class name, they found that it was still not aligned. The final debugging found the following solution.

2. Modification method

3. Effect drawing

Label: Content = 1:2

The width of label and content is set in proportion to the width. In the figure above, I wrote label and content as 100px and 200px respectively, and the width of the label and content are displayed as 1:2 of 50% of the total width (because I set Colum to 2). To change the width ratio of the label and content, you can change the pixels of the label and content as required.

Label: Content = 1:1