css - Align items top and bottom inside same container -

i have items inside container, there're black , red items:

<div class="container">   <div class="item black"></div>   <div class="item black"></div>   <div class="item red"></div>   <div class="item red"></div>   <div class="item black"></div>   <div class="item red"></div> </div> 

i align black items top , red items bottom in css without modifying html code.

here's jsfiddle experiment https://jsfiddle.net/e72c99c0/.

you can use order group items, , margin-bottom:auto pin 1 group bottom.

.container {    height: 300px;    width: 40px;    background: #ddd;    display: flex;    flex-direction: column;  }    .item {    width: 40px;    height: 20px;    margin-bottom: 1px;    border: 1px solid #aaa;  }    .item.black {    background: #222;      }    .black:nth-of-type(5) {    margin-bottom: auto ;  }    .item.red {    background: red;    order:2;  }

<div class="container">    <div class="item black"></div>    <div class="item black"></div>    <div class="item red"></div>    <div class="item red"></div>    <div class="item black"></div>    <div class="item red"></div>  </div>