Single <br /> doesn’t create a line break instead, requires two

I am working on a WordPress theme and have been using Bootstrap a bit. I put my article excerpt for the homepage in a well, div class='well'. I have edited the well to have straight corners and have changed the border colour. Except those, there aren’t any changes.
But, when I try to add a linebreak between categories and tags, it doesn’t float to extreme left as in the image below.

Q1. How to use a single <br /> to make a line break between the two?
Q2. There’s a lot of blank space in the well after the category and tags. How to remove it?

HTML Code

<div class="categories"><?php the_category(' '); ?></div><br /><br /><div class="tags"><?php the_tags('',' '); ?></div>

CSS

.categories{float:left; margin-right:3px;margin-bottom: 1px;}
.categories a {
background: #00A1E0;
color: #FFFFFF;
display: inline-block;
margin-bottom: 2px;
margin-left: 0px;
padding: 1px 7px;
text-decoration: none;
transition: all 0.3s ease 0s;
} 
.categories a:hover{background:  #666; color:#fff;}

.tags{float:left; margin-right:1%;margin-bottom:4px;}
.tags a {
font-size:70%;
background:#666666;
color: #FFFFFF;
display: inline-block;
margin-bottom: 3px;
margin-left: 0px;
padding: 1px 7px;
text-decoration: none;
transition: all 0.3s ease 0s;
} 
.tags a:hover{color:#FFFFFF;}

When I use single <br />, this is what happens
http://i.stack.imgur.com/OIDYt.png (Sorry, can’t post images due to lack of rep).