Component misalignment (button, dropdown)

[aaraggornn]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports) Example Plunkr: http://plnkr.co/edit/afgNLR

Current behavior Placing a Button and Dropdown next to each other do not line up vertically See also http://forum.primefaces.org/viewtopic.php?f=35&t=48468

Expected behavior The Button and Dropdown should line up vertically

Minimal reproduction of the problem with instructions Create a new Angular project with only PrimeNG installed and the Button and Dropdown modules included. In the template add the Button and Dropdown

<button pButton label="Today"></button>
<p-dropdown [options]="selectedDateRangeOptions" [(ngModel)]="selectedDateRange"></p-dropdown>

See http://plnkr.co/edit/afgNLR

What is the motivation / use case for changing the behavior? To allow a seamless user experience which looks professional

Please tell us about your environment: Windows 10 Compiled and run using angular-cli and also occurs in Plunkr

• Angular version: 2.2.4

• PrimeNG version: 1.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome 34, FF 50, FF Dev 52, IE 11, Edge 38 Haven't checked any other browsers

• Language: [all | TypeScript X.X | ES6/7 | ES5] Tyepscript 2.0.10

• Node (for AoT issues): node --version =
  6.5.0

[cagataycivici]

vertical-align: middle on of those should fix it.