How to remove border from elements in the last row?Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid

Does Dispel Magic work on Tiny Hut?

What do you call someone who asks many questions?

Can someone clarify Hamming's notion of important problems in relation to modern academia?

Is it possible to create a QR code using text?

Knowledge-based authentication using Domain-driven Design in C#

Did 'Cinema Songs' exist during Hiranyakshipu's time?

Standard deduction V. mortgage interest deduction - is it basically only for the rich?

Getting extremely large arrows with tikzcd

Implication of namely

What is the fastest integer factorization to break RSA?

Why was Sir Cadogan fired?

How dangerous is XSS

Convert seconds to minutes

What historical events would have to change in order to make 19th century "steampunk" technology possible?

Why was the shrink from 8″ made only to 5.25″ and not smaller (4″ or less)

Can compressed videos be decoded back to their uncompresed original format?

In the UK, is it possible to get a referendum by a court decision?

Unlock My Phone! February 2018

Is it possible to map the firing of neurons in the human brain so as to stimulate artificial memories in someone else?

Blending or harmonizing

How do conventional missiles fly?

What is required to make GPS signals available indoors?

How could indestructible materials be used in power generation?

Is it a bad idea to plug the other end of ESD strap to wall ground?



How to remove border from elements in the last row?


Targeting flex items on the last rowHow to vertically wrap content with flexbox?Remove border from IFrameHow do you keep parents of floated elements from collapsing?CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?Div width 100% minus fixed amount of pixelsHow can I select an element with multiple classes in jQuery?How to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How to remove border (outline) around text/input boxes? (Chrome)How do I remove the space between inline-block elements?Flex-box: Align last row to grid













7















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>





This basically renders something like this:



enter image description here



My questions is:



How do I get rid of the border in the last row?










share|improve this question
























  • I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

    – Funk Doc
    5 hours ago











  • Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

    – supersan
    4 hours ago






  • 4





    Just add: .qa:nth-last-child(-n+2) border: 0;

    – bea
    4 hours ago






  • 2





    @bea: your's is the right answer! Put it as an answer and you'll get upvoted

    – enxaneta
    4 hours ago















7















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>





This basically renders something like this:



enter image description here



My questions is:



How do I get rid of the border in the last row?










share|improve this question
























  • I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

    – Funk Doc
    5 hours ago











  • Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

    – supersan
    4 hours ago






  • 4





    Just add: .qa:nth-last-child(-n+2) border: 0;

    – bea
    4 hours ago






  • 2





    @bea: your's is the right answer! Put it as an answer and you'll get upvoted

    – enxaneta
    4 hours ago













7












7








7








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>





This basically renders something like this:



enter image description here



My questions is:



How do I get rid of the border in the last row?










share|improve this 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>





This basically renders something like this:



enter image description here



My questions is:



How do I get rid of the border in the last row?






.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>





.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>






html css css3 flexbox css-selectors






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 1 hour ago









Michael_B

157k50255363




157k50255363










asked 5 hours ago









supersansupersan

1,7871837




1,7871837












  • I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

    – Funk Doc
    5 hours ago











  • Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

    – supersan
    4 hours ago






  • 4





    Just add: .qa:nth-last-child(-n+2) border: 0;

    – bea
    4 hours ago






  • 2





    @bea: your's is the right answer! Put it as an answer and you'll get upvoted

    – enxaneta
    4 hours ago

















  • I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

    – Funk Doc
    5 hours ago











  • Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

    – supersan
    4 hours ago






  • 4





    Just add: .qa:nth-last-child(-n+2) border: 0;

    – bea
    4 hours ago






  • 2





    @bea: your's is the right answer! Put it as an answer and you'll get upvoted

    – enxaneta
    4 hours ago
















I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

– Funk Doc
5 hours ago





I think nth-last-child would be able to help you css-tricks.com/almanac/selectors/n/nth-last-child

– Funk Doc
5 hours ago













Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

– supersan
4 hours ago





Yes I was thinking along the same lines but that only targets the bottom right div. I need it to target both last row divs

– supersan
4 hours ago




4




4





Just add: .qa:nth-last-child(-n+2) border: 0;

– bea
4 hours ago





Just add: .qa:nth-last-child(-n+2) border: 0;

– bea
4 hours ago




2




2





@bea: your's is the right answer! Put it as an answer and you'll get upvoted

– enxaneta
4 hours ago





@bea: your's is the right answer! Put it as an answer and you'll get upvoted

– enxaneta
4 hours ago












7 Answers
7






active

oldest

votes


















3














1: Use Another CSS class



We can create another CSS class which removes any styling form an existence element



.no-border 
border-bottom: none;



Then add this class to the html element e.g.



 <div class="qa no-border" style="width:50%;">
<div>Question</div>
<div>Answer</div>
</div>


2: Use CSS pseudo selector




.qa:last-child
border-bottom: none;


.qa:nth-last-child(2)
border-bottom: none;






share|improve this answer

























  • they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

    – Temani Afif
    3 hours ago











  • Yes, good catch Temani! Thanks

    – KhaledMohamedP
    3 hours ago











  • never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

    – supersan
    3 hours ago


















3














judging by your layout, the items are numbered:



 [1] [2]
[3] [4]
[5] [6]


now, you can either:



  • remove border-bottom from 5th & 6th items

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


.qa:nth-of-type(5),
.qa:nth-of-type(6)
border-bottom: none;



  • add border-bottom to 1st-4th items:

.qa:nth-of-type(n+5) 
border-bottom: 1px solid #ccc;



  • do similar math but for adding border-top


you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):



.container 
display: flex;
flex-direction: column;
flex-wrap: wrap;



which numbers items in a different orientation:



 [1] [4]
[2] [5]
[3] [6]


now you reomove border-bottom on every 3rd item:



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


.qa:nth-of-type(3n)
border-bottom: none;




there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:



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


.row:last-of-type .qa
border-bottom: none;






share|improve this answer






























    1














    Don't think about it as border-bottom.



    Think about it as border-top and exclude the first two elements.



    So instead of this:



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


    Try this:



    .qa + .qa + .qa border-top: 1px solid #ccc; 





    .qa + .qa + .qa 
    border-top: 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>





    The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.



    So .qa + .qa would target only .qa elements that are preceded by one .qa element.



    .qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.




    Alternatively, you can try this:



    .qa:nth-child(n + 3) border-top: 1px solid #ccc; 





    .qa:nth-child(n + 3) 
    border-top: 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>








    share|improve this answer

























    • Your first solution is absolutely unreadable. Your second option I like.

      – Raz0rwire
      3 hours ago











    • @Raz0rwire, what don't you understand?

      – Michael_B
      3 hours ago











    • @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

      – Raz0rwire
      3 hours ago


















    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>





    This trick should work even if the number of element in a row is different from 2:






    .qa 
    border-bottom: 1px solid #ccc;
    margin-bottom:-1px;
    margin-top:1px;


    /*irrelevant styles*/
    padding: 5px;
    margin-left:5px;
    margin-right:5px;
    box-sizing: border-box;
    flex:1 1 20%;


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

    <div class="wrapper">
    <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 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>





    It will also work with a reponsive layout where the number of columns can change on small screens:






    .qa 
    border-bottom: 1px solid #ccc;
    margin-bottom:-1px;
    margin-top:1px;


    /*irrelevant styles*/
    padding: 5px;
    margin-left:5px;
    margin-right:5px;
    box-sizing: border-box;
    flex:1 1 20%;


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


    @media all and (max-width:800px)
    .qa
    flex:1 1 30%;



    @media all and (max-width:400px)
    .qa
    flex:1 1 40%;


    <div class="wrapper">
    <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 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>








    share|improve this answer




















    • 1





      This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

      – supersan
      3 hours ago











    • @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

      – Temani Afif
      2 hours ago


















    0














    If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)



    Css for .qa parent element




    content: "";
    position: relative;
    bottom: 0;
    left:0;
    right:0;
    height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
    background: #fff; /* match this with your parent element background colour*/






    share|improve this answer
































      0














      You could use border-top and remove the first two with the :nth-child CSS selector. Like this:






      .qa 
      border-top: 1px solid #ccc;


      .qa:nth-child(-n+2)
      border-top: none;

      <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>








      share|improve this answer






























        0














        I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.






        .qa:not(:nth-child(-n+2)) 
        border-top: 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>








        share|improve this answer























          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          7 Answers
          7






          active

          oldest

          votes








          7 Answers
          7






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          3














          1: Use Another CSS class



          We can create another CSS class which removes any styling form an existence element



          .no-border 
          border-bottom: none;



          Then add this class to the html element e.g.



           <div class="qa no-border" style="width:50%;">
          <div>Question</div>
          <div>Answer</div>
          </div>


          2: Use CSS pseudo selector




          .qa:last-child
          border-bottom: none;


          .qa:nth-last-child(2)
          border-bottom: none;






          share|improve this answer

























          • they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

            – Temani Afif
            3 hours ago











          • Yes, good catch Temani! Thanks

            – KhaledMohamedP
            3 hours ago











          • never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

            – supersan
            3 hours ago















          3














          1: Use Another CSS class



          We can create another CSS class which removes any styling form an existence element



          .no-border 
          border-bottom: none;



          Then add this class to the html element e.g.



           <div class="qa no-border" style="width:50%;">
          <div>Question</div>
          <div>Answer</div>
          </div>


          2: Use CSS pseudo selector




          .qa:last-child
          border-bottom: none;


          .qa:nth-last-child(2)
          border-bottom: none;






          share|improve this answer

























          • they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

            – Temani Afif
            3 hours ago











          • Yes, good catch Temani! Thanks

            – KhaledMohamedP
            3 hours ago











          • never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

            – supersan
            3 hours ago













          3












          3








          3







          1: Use Another CSS class



          We can create another CSS class which removes any styling form an existence element



          .no-border 
          border-bottom: none;



          Then add this class to the html element e.g.



           <div class="qa no-border" style="width:50%;">
          <div>Question</div>
          <div>Answer</div>
          </div>


          2: Use CSS pseudo selector




          .qa:last-child
          border-bottom: none;


          .qa:nth-last-child(2)
          border-bottom: none;






          share|improve this answer















          1: Use Another CSS class



          We can create another CSS class which removes any styling form an existence element



          .no-border 
          border-bottom: none;



          Then add this class to the html element e.g.



           <div class="qa no-border" style="width:50%;">
          <div>Question</div>
          <div>Answer</div>
          </div>


          2: Use CSS pseudo selector




          .qa:last-child
          border-bottom: none;


          .qa:nth-last-child(2)
          border-bottom: none;







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited 3 hours ago









          Temani Afif

          81.8k104793




          81.8k104793










          answered 3 hours ago









          KhaledMohamedPKhaledMohamedP

          2,29021720




          2,29021720












          • they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

            – Temani Afif
            3 hours ago











          • Yes, good catch Temani! Thanks

            – KhaledMohamedP
            3 hours ago











          • never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

            – supersan
            3 hours ago

















          • they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

            – Temani Afif
            3 hours ago











          • Yes, good catch Temani! Thanks

            – KhaledMohamedP
            3 hours ago











          • never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

            – supersan
            3 hours ago
















          they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

          – Temani Afif
          3 hours ago





          they are called pseudo classes (developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes)

          – Temani Afif
          3 hours ago













          Yes, good catch Temani! Thanks

          – KhaledMohamedP
          3 hours ago





          Yes, good catch Temani! Thanks

          – KhaledMohamedP
          3 hours ago













          never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

          – supersan
          3 hours ago





          never realized it would always be the last and second last element. the layout makes it look like it's the 3rd element and 6th element. thanks

          – supersan
          3 hours ago













          3














          judging by your layout, the items are numbered:



           [1] [2]
          [3] [4]
          [5] [6]


          now, you can either:



          • remove border-bottom from 5th & 6th items

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


          .qa:nth-of-type(5),
          .qa:nth-of-type(6)
          border-bottom: none;



          • add border-bottom to 1st-4th items:

          .qa:nth-of-type(n+5) 
          border-bottom: 1px solid #ccc;



          • do similar math but for adding border-top


          you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):



          .container 
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;



          which numbers items in a different orientation:



           [1] [4]
          [2] [5]
          [3] [6]


          now you reomove border-bottom on every 3rd item:



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


          .qa:nth-of-type(3n)
          border-bottom: none;




          there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:



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


          .row:last-of-type .qa
          border-bottom: none;






          share|improve this answer



























            3














            judging by your layout, the items are numbered:



             [1] [2]
            [3] [4]
            [5] [6]


            now, you can either:



            • remove border-bottom from 5th & 6th items

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


            .qa:nth-of-type(5),
            .qa:nth-of-type(6)
            border-bottom: none;



            • add border-bottom to 1st-4th items:

            .qa:nth-of-type(n+5) 
            border-bottom: 1px solid #ccc;



            • do similar math but for adding border-top


            you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):



            .container 
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;



            which numbers items in a different orientation:



             [1] [4]
            [2] [5]
            [3] [6]


            now you reomove border-bottom on every 3rd item:



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


            .qa:nth-of-type(3n)
            border-bottom: none;




            there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:



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


            .row:last-of-type .qa
            border-bottom: none;






            share|improve this answer

























              3












              3








              3







              judging by your layout, the items are numbered:



               [1] [2]
              [3] [4]
              [5] [6]


              now, you can either:



              • remove border-bottom from 5th & 6th items

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


              .qa:nth-of-type(5),
              .qa:nth-of-type(6)
              border-bottom: none;



              • add border-bottom to 1st-4th items:

              .qa:nth-of-type(n+5) 
              border-bottom: 1px solid #ccc;



              • do similar math but for adding border-top


              you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):



              .container 
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;



              which numbers items in a different orientation:



               [1] [4]
              [2] [5]
              [3] [6]


              now you reomove border-bottom on every 3rd item:



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


              .qa:nth-of-type(3n)
              border-bottom: none;




              there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:



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


              .row:last-of-type .qa
              border-bottom: none;






              share|improve this answer













              judging by your layout, the items are numbered:



               [1] [2]
              [3] [4]
              [5] [6]


              now, you can either:



              • remove border-bottom from 5th & 6th items

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


              .qa:nth-of-type(5),
              .qa:nth-of-type(6)
              border-bottom: none;



              • add border-bottom to 1st-4th items:

              .qa:nth-of-type(n+5) 
              border-bottom: 1px solid #ccc;



              • do similar math but for adding border-top


              you can also flip the flex direction to make it more "reasonable" but also requires a fixed height (needed for wrapping, see here):



              .container 
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;



              which numbers items in a different orientation:



               [1] [4]
              [2] [5]
              [3] [6]


              now you reomove border-bottom on every 3rd item:



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


              .qa:nth-of-type(3n)
              border-bottom: none;




              there are more complex fixes as well. for instance, you can group items in rows and apply border on row based selectors. This will be closest to what you really intended in the first place:



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


              .row:last-of-type .qa
              border-bottom: none;







              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered 3 hours ago









              zhirzhzhirzh

              1,6801723




              1,6801723





















                  1














                  Don't think about it as border-bottom.



                  Think about it as border-top and exclude the first two elements.



                  So instead of this:



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


                  Try this:



                  .qa + .qa + .qa border-top: 1px solid #ccc; 





                  .qa + .qa + .qa 
                  border-top: 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>





                  The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.



                  So .qa + .qa would target only .qa elements that are preceded by one .qa element.



                  .qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.




                  Alternatively, you can try this:



                  .qa:nth-child(n + 3) border-top: 1px solid #ccc; 





                  .qa:nth-child(n + 3) 
                  border-top: 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>








                  share|improve this answer

























                  • Your first solution is absolutely unreadable. Your second option I like.

                    – Raz0rwire
                    3 hours ago











                  • @Raz0rwire, what don't you understand?

                    – Michael_B
                    3 hours ago











                  • @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                    – Raz0rwire
                    3 hours ago















                  1














                  Don't think about it as border-bottom.



                  Think about it as border-top and exclude the first two elements.



                  So instead of this:



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


                  Try this:



                  .qa + .qa + .qa border-top: 1px solid #ccc; 





                  .qa + .qa + .qa 
                  border-top: 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>





                  The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.



                  So .qa + .qa would target only .qa elements that are preceded by one .qa element.



                  .qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.




                  Alternatively, you can try this:



                  .qa:nth-child(n + 3) border-top: 1px solid #ccc; 





                  .qa:nth-child(n + 3) 
                  border-top: 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>








                  share|improve this answer

























                  • Your first solution is absolutely unreadable. Your second option I like.

                    – Raz0rwire
                    3 hours ago











                  • @Raz0rwire, what don't you understand?

                    – Michael_B
                    3 hours ago











                  • @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                    – Raz0rwire
                    3 hours ago













                  1












                  1








                  1







                  Don't think about it as border-bottom.



                  Think about it as border-top and exclude the first two elements.



                  So instead of this:



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


                  Try this:



                  .qa + .qa + .qa border-top: 1px solid #ccc; 





                  .qa + .qa + .qa 
                  border-top: 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>





                  The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.



                  So .qa + .qa would target only .qa elements that are preceded by one .qa element.



                  .qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.




                  Alternatively, you can try this:



                  .qa:nth-child(n + 3) border-top: 1px solid #ccc; 





                  .qa:nth-child(n + 3) 
                  border-top: 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>








                  share|improve this answer















                  Don't think about it as border-bottom.



                  Think about it as border-top and exclude the first two elements.



                  So instead of this:



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


                  Try this:



                  .qa + .qa + .qa border-top: 1px solid #ccc; 





                  .qa + .qa + .qa 
                  border-top: 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>





                  The next-sibling combinator (+) targets an element that is immediately preceded by another element, and both share the same parent.



                  So .qa + .qa would target only .qa elements that are preceded by one .qa element.



                  .qa + .qa + .qa targets only .qa elements that are preceded by two .qa elements.




                  Alternatively, you can try this:



                  .qa:nth-child(n + 3) border-top: 1px solid #ccc; 





                  .qa:nth-child(n + 3) 
                  border-top: 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>








                  .qa + .qa + .qa 
                  border-top: 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>





                  .qa + .qa + .qa 
                  border-top: 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>





                  .qa:nth-child(n + 3) 
                  border-top: 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>





                  .qa:nth-child(n + 3) 
                  border-top: 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>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 4 hours ago

























                  answered 4 hours ago









                  Michael_BMichael_B

                  157k50255363




                  157k50255363












                  • Your first solution is absolutely unreadable. Your second option I like.

                    – Raz0rwire
                    3 hours ago











                  • @Raz0rwire, what don't you understand?

                    – Michael_B
                    3 hours ago











                  • @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                    – Raz0rwire
                    3 hours ago

















                  • Your first solution is absolutely unreadable. Your second option I like.

                    – Raz0rwire
                    3 hours ago











                  • @Raz0rwire, what don't you understand?

                    – Michael_B
                    3 hours ago











                  • @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                    – Raz0rwire
                    3 hours ago
















                  Your first solution is absolutely unreadable. Your second option I like.

                  – Raz0rwire
                  3 hours ago





                  Your first solution is absolutely unreadable. Your second option I like.

                  – Raz0rwire
                  3 hours ago













                  @Raz0rwire, what don't you understand?

                  – Michael_B
                  3 hours ago





                  @Raz0rwire, what don't you understand?

                  – Michael_B
                  3 hours ago













                  @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                  – Raz0rwire
                  3 hours ago





                  @Micheal_B Understanding it now is not the problem, looking at the code 6 months from now could introduce some head scratching. Maybe I was being a little dramatic..

                  – Raz0rwire
                  3 hours ago











                  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>





                  This trick should work even if the number of element in a row is different from 2:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  It will also work with a reponsive layout where the number of columns can change on small screens:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>








                  share|improve this answer




















                  • 1





                    This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                    – supersan
                    3 hours ago











                  • @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                    – Temani Afif
                    2 hours ago















                  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>





                  This trick should work even if the number of element in a row is different from 2:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  It will also work with a reponsive layout where the number of columns can change on small screens:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>








                  share|improve this answer




















                  • 1





                    This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                    – supersan
                    3 hours ago











                  • @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                    – Temani Afif
                    2 hours ago













                  1












                  1








                  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>





                  This trick should work even if the number of element in a row is different from 2:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  It will also work with a reponsive layout where the number of columns can change on small screens:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>








                  share|improve this answer















                  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>





                  This trick should work even if the number of element in a row is different from 2:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  It will also work with a reponsive layout where the number of columns can change on small screens:






                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>








                  .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>





                  .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>





                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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

                  <div class="wrapper">
                  <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 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>





                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>





                  .qa 
                  border-bottom: 1px solid #ccc;
                  margin-bottom:-1px;
                  margin-top:1px;


                  /*irrelevant styles*/
                  padding: 5px;
                  margin-left:5px;
                  margin-right:5px;
                  box-sizing: border-box;
                  flex:1 1 20%;


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


                  @media all and (max-width:800px)
                  .qa
                  flex:1 1 30%;



                  @media all and (max-width:400px)
                  .qa
                  flex:1 1 40%;


                  <div class="wrapper">
                  <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 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>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited 2 hours ago

























                  answered 3 hours ago









                  Temani AfifTemani Afif

                  81.8k104793




                  81.8k104793







                  • 1





                    This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                    – supersan
                    3 hours ago











                  • @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                    – Temani Afif
                    2 hours ago












                  • 1





                    This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                    – supersan
                    3 hours ago











                  • @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                    – Temani Afif
                    2 hours ago







                  1




                  1





                  This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                  – supersan
                  3 hours ago





                  This is great out of the box thinking! and it covers both flex row and columns. That's why I love SO, you get to learn so much! thanks

                  – supersan
                  3 hours ago













                  @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                  – Temani Afif
                  2 hours ago





                  @supersan yes exactly ;) it will cover all the different configuration and more important the responsive part as I am sure that your layout will change to one column for example on small screens.

                  – Temani Afif
                  2 hours ago











                  0














                  If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)



                  Css for .qa parent element




                  content: "";
                  position: relative;
                  bottom: 0;
                  left:0;
                  right:0;
                  height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
                  background: #fff; /* match this with your parent element background colour*/






                  share|improve this answer





























                    0














                    If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)



                    Css for .qa parent element




                    content: "";
                    position: relative;
                    bottom: 0;
                    left:0;
                    right:0;
                    height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
                    background: #fff; /* match this with your parent element background colour*/






                    share|improve this answer



























                      0












                      0








                      0







                      If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)



                      Css for .qa parent element




                      content: "";
                      position: relative;
                      bottom: 0;
                      left:0;
                      right:0;
                      height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
                      background: #fff; /* match this with your parent element background colour*/






                      share|improve this answer















                      If you can add a :after pseudo Element in parent container of .qa (make sure your parent container is set to position: relative; or position: absolute;)



                      Css for .qa parent element




                      content: "";
                      position: relative;
                      bottom: 0;
                      left:0;
                      right:0;
                      height: /* set this to your (bottom padding of container + bottom margin of .qa box + border width) */
                      background: #fff; /* match this with your parent element background colour*/







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited 3 hours ago

























                      answered 4 hours ago









                      vaibhav kumarvaibhav kumar

                      295




                      295





















                          0














                          You could use border-top and remove the first two with the :nth-child CSS selector. Like this:






                          .qa 
                          border-top: 1px solid #ccc;


                          .qa:nth-child(-n+2)
                          border-top: none;

                          <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>








                          share|improve this answer



























                            0














                            You could use border-top and remove the first two with the :nth-child CSS selector. Like this:






                            .qa 
                            border-top: 1px solid #ccc;


                            .qa:nth-child(-n+2)
                            border-top: none;

                            <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>








                            share|improve this answer

























                              0












                              0








                              0







                              You could use border-top and remove the first two with the :nth-child CSS selector. Like this:






                              .qa 
                              border-top: 1px solid #ccc;


                              .qa:nth-child(-n+2)
                              border-top: none;

                              <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>








                              share|improve this answer













                              You could use border-top and remove the first two with the :nth-child CSS selector. Like this:






                              .qa 
                              border-top: 1px solid #ccc;


                              .qa:nth-child(-n+2)
                              border-top: none;

                              <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>








                              .qa 
                              border-top: 1px solid #ccc;


                              .qa:nth-child(-n+2)
                              border-top: none;

                              <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>





                              .qa 
                              border-top: 1px solid #ccc;


                              .qa:nth-child(-n+2)
                              border-top: none;

                              <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>






                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered 3 hours ago









                              aridlehooveraridlehoover

                              1,8041615




                              1,8041615





















                                  0














                                  I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.






                                  .qa:not(:nth-child(-n+2)) 
                                  border-top: 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>








                                  share|improve this answer



























                                    0














                                    I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.






                                    .qa:not(:nth-child(-n+2)) 
                                    border-top: 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>








                                    share|improve this answer

























                                      0












                                      0








                                      0







                                      I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.






                                      .qa:not(:nth-child(-n+2)) 
                                      border-top: 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>








                                      share|improve this answer













                                      I don't like adding a rule when you know you're immediately going to overwrite it, so here's a slightly different version of aridlehoover's answer with only one CSS rule.






                                      .qa:not(:nth-child(-n+2)) 
                                      border-top: 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>








                                      .qa:not(:nth-child(-n+2)) 
                                      border-top: 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>





                                      .qa:not(:nth-child(-n+2)) 
                                      border-top: 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>






                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered 2 hours ago









                                      GeatGeat

                                      208110




                                      208110



























                                          draft saved

                                          draft discarded
















































                                          Thanks for contributing an answer to Stack Overflow!


                                          • Please be sure to answer the question. Provide details and share your research!

                                          But avoid


                                          • Asking for help, clarification, or responding to other answers.

                                          • Making statements based on opinion; back them up with references or personal experience.

                                          To learn more, see our tips on writing great answers.




                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function ()
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55480980%2fhow-to-remove-border-from-elements-in-the-last-row%23new-answer', 'question_page');

                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          Popular posts from this blog

                                          Oświęcim Innehåll Historia | Källor | Externa länkar | Navigeringsmeny50°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.2213950°2′18″N 19°13′17″Ö / 50.03833°N 19.22139°Ö / 50.03833; 19.221393089658Nordisk familjebok, AuschwitzInsidan tro och existensJewish Community i OświęcimAuschwitz Jewish Center: MuseumAuschwitz Jewish Center

                                          Valle di Casies Indice Geografia fisica | Origini del nome | Storia | Società | Amministrazione | Sport | Note | Bibliografia | Voci correlate | Altri progetti | Collegamenti esterni | Menu di navigazione46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)46°46′N 12°11′E / 46.766667°N 12.183333°E46.766667; 12.183333 (Valle di Casies)Sito istituzionaleAstat Censimento della popolazione 2011 - Determinazione della consistenza dei tre gruppi linguistici della Provincia Autonoma di Bolzano-Alto Adige - giugno 2012Numeri e fattiValle di CasiesDato IstatTabella dei gradi/giorno dei Comuni italiani raggruppati per Regione e Provincia26 agosto 1993, n. 412Heraldry of the World: GsiesStatistiche I.StatValCasies.comWikimedia CommonsWikimedia CommonsValle di CasiesSito ufficialeValle di CasiesMM14870458910042978-6

                                          Typsetting diagram chases (with TikZ?) Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)How to define the default vertical distance between nodes?Draw edge on arcNumerical conditional within tikz keys?TikZ: Drawing an arc from an intersection to an intersectionDrawing rectilinear curves in Tikz, aka an Etch-a-Sketch drawingLine up nested tikz enviroments or how to get rid of themHow to place nodes in an absolute coordinate system in tikzCommutative diagram with curve connecting between nodesTikz with standalone: pinning tikz coordinates to page cmDrawing a Decision Diagram with Tikz and layout manager