Выравнивание по левому краю
 

Здравствуйте, подскажите пожалуйста, как сделать так, что бы активный элемент всегда был по левому краю

<div class="content">
<div class="tab active">Яблоко</div><div class="tab">Груша</div><div class="tab">Апельсин</div><div class="tab">Мандарин</div><div class="tab">Дыня</div><div class="tab">Арбуз</div><div class="tab">Вишня</div><div class="tab">черешня</div>
</div>

$('.tab').click(function(){
  $('.tab').removeClass('active');
  $(this).addClass('active');
});

.content{
  display:flex;
  width:500px;
  overflow:hidden;
  padding:15px;
}
.tab{
  border:1px solid #ddd;
  margin-right:15px;
  padding:10px 30px;
  cursor:pointer;
}
.tab.active{
  color:#fff;
  background-color:red;
}

sega1821,

.tab{
  border:1px solid #ddd;
  margin-right:15px;
  padding:10px 30px;
  cursor:pointer;
  order: 2;
}
.tab.active{
  color:#fff;
  background-color:red;
  order: 1;
}