Kyle Brown Kyle Brown - 2 months ago 6
CSS Question

How to underline second label in a DIV

so I am working on a pretty big site for a customer. And all the information is entered in via labels and follow this format:

<div class="col-xs-12 col-md-6" id="permissionsDIV">
<label id="labelName"></label><label id="labelData"></label>
</div>


The labelName allows the customer to customize what the label actually says (Amount vs Amount($) etc.) And the data is filled with data via AJAX.

I was wondering if there is a way to apply a border-bottom to the second label (labelData), even if there is no data. For example, if I apply a border to the labelData as is, the label is only the width of the text inside, but I would like the underline to fill the space between the the labelName and the end of the DIV. Like so:

<div>LabelName: _______________labelData________________</div>


Because this is responsive I would like to refrain from hard-coding the width of the label.

Answer

2 options:

  1. You can apply a minimum width using css

  2. You can apply constant left and right padding to the label which would then have the underline under it

One such example:

.permissionsDIV label:nth-child(2) {
     min-width: 50px; 
     border-bottom: 1px solid grey;
     display: inline-block;
     padding: 0 15px;
  
     margin-left: 10px;
}
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV">
   <label id="labelName">My Name</label><label id="labelData">Larry The Cool Guy</label>
</div>
<div class="col-xs-12 col-md-6 permissionsDIV" id="permissionsDIV2">
   <label id="labelName">My Name</label><label id="labelData"></label>
</div>