html - How to remove border from elements in the last row?

Question

My layout is something like this (I'm typing a simplified version with inline styles instead of classes)

.qa {
  border-bottom: 1px solid #ccc;
}

<div style="display: flex; flex-wrap: wrap; flex-direction: row">
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa" style="width:50%;">
    <div>Question</div>
    <div>Answer</div>
  </div>
</div>

Answer 1

You can add a negative bottom margin to your elements then hide the overflow. This will hide the unwanted borders.

.qa {
  border-bottom: 1px solid #ccc;
  margin-bottom:-1px;
  margin-top:1px; /*to rectify the bottom margin, we can also consider padding-bottom*/
  
  /*irrelevant styles*/
  padding: 5px;
  margin-left:5px;
  margin-right:5px;
  box-sizing: border-box;
  flex:1 1 40%;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  overflow:hidden;
}

<div class="wrapper">
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer</div>
  </div>
  <div class="qa">
    <div>Question</div>
    <div>Answer<br>Answer</div>
  </div>
</div>