Creating inline date_select dropdowns using simple_form and zurb foundation - ruby-on-rails

Question

I'm using Simple_Form with Zurb Foundation in my rails application.
One of more views has a form with the following date_select
The form fields are showing up stacked rather than inline. I've checked everything and can't figure out how to get these to show-up correctly.
What am I missing?
You can see the repo at https://github.com/stanrails/momtomom in the event.html.erb view.
The code for the section is below:
<div class="row">
<div class="small-5 columns">
<%= f.date_select :eventDate %>
</div>
</div>

Answer 1

One of the workaround is to have something manually like this:
form.custom .dropdown.date{
width: 30%;
margin-right: 10px;
float: left;
}

Answer 2

Here is another take on this I wanted to share which ends up looking like this:
A little html!
div[class="row"]
div[class="large-12 columns select-date-wrapper"]
= f.date_select(:birthdate,
options = { start_year: DateTime.now.year - 18, end_year: DateTime.now.year - 75, order: [:month, :day, :year], include_blank: true},
html_options = { class: 'select-date'})
A little sass!
select.select-date {
width: 30%;
margin-right: 10px;
float: left;
}
.select-date-wrapper{
select:first-of-type{
width: 45%;
}
select:nth-of-type(2){
width: 20%;
}
select:last-of-type{
margin-right: 0;
}
}

Answer 3

I solved the same problem by checking the html and changing the css of the relevant tags:
<%= f.date_select :date %> produces:
<div class="field col-md-6">
<select id="invoice_date_1i" name="invoice[date(1i)]">
<select id="invoice_date_2i" name="invoice[date(2i)]">
<select id="invoice_date_3i" name="invoice[date(3i)]">
</div>
With "Invoice" being the model name here. Therefore, in your css you can add
#yourModel_date_1i, #yourmodel_date_2i, #yourmodel_date_3i { width: 30%; }
for an easy fix.