title: How to border bottom the div content on click
body: <p>I am working on react to display some images at the top with labels, and when I click on any of the I mage I want to show a border-bottom.</p>
  <p>I am successfully doing this but the issue with the styling <strong>CSS</strong></p>
  <p>When I am showing css it is not showing at the bottom but at all image bottom it is showing up, which is breaking the alignment</p>
  <p><strong>I am using bootstrap for better UI</strong></p>
  <p><strong>My code</strong></p>
  <pre><code>&lt;div className=&quot;App&quot;&gt;
    &lt;div className=&quot;form-inline&quot;&gt;
      {d.map((li, index) =&gt; (
         &lt;div key={li.name} onClick={() =&gt; img_click_handler(index)}&gt;
           &lt;img src={li.url} alt={li.name} className=&quot;image_class&quot; /&gt;
           &lt;div className=&quot;label_name text-left&quot;&gt;{li.name}&lt;/div&gt;
           &lt;div className={index === index_id ? &quot;test&quot; : &quot;&quot;} /&gt;
           &lt;/div&gt;
      ))}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.App {
    min-height: 17.6vh;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 10px #00000040;
    opacity: 1;
  }
  
  .image_class {
    height: 7vh;
    width: 4vw;
    margin-right: 5rem;
  }
  
  .label_name {
    padding-top: 1rem;
    width: min-content;
  }
  
  .test {
    border-bottom: 4px solid gray;
    background-color: red;
  }
  </code></pre>
  <p><strong>Issue</strong></p>
  <p>The issue is the <code>border</code> bottom I want to show to the end of the bar <code>div</code> but it is showing up to image bottom</p>
  <p><a href="https://codesandbox.io/s/inspiring-euler-jwwkw?file=/src/styles.css:0-329" rel="nofollow noreferrer">Please check this Code sandbox for working example</a></p>
  <p>** I want border bottom should come to the ending of the bar I don't know what I am doing wrong**</p>