My approach to creating a paper form involves using dt and dd elements.
The width of dt should align with the word, while dl should occupy the remaining space.
Currently, I manually adjust each line, but I am looking for a way to automate this using CSS.
div {
width: 200px;
}
/* Styling for dl, dt, and dd on the same line */
dl {
width: 100%;
overflow: hidden;
padding: 0;
margin: 0
}
dt {
float: left;
/* Adjust the width; ensure the total of both is 100% */
padding: 0;
}
dd {
float: left;
/* Adjust the width; ensure the total of both is 100% */
margin: 0;
box-sizing: border-box;
border-bottom: 1px solid black;
}
/* Setting specific widths for dt and dd */
dl dt:nth-of-type(1) {
width: 36%;
}
dl dd:nth-of-type(1) {
width: 64%;
}
dl dt:nth-of-type(2) {
width: 26%;
}
dl dd:nth-of-type(2) {
width: 74%;
}
dl dt:nth-of-type(3) {
width: 14%;
}
dl dd:nth-of-type(3) {
width: 86%;
}<div>
<dl>
<dt>aaabbbccc:</dt>
<dd> </dd>
<dt>aaabbb:</dt>
<dd> </dd>
<dt>aaa:</dt>
<dd> </dd>
</dl>
</div>