Align three boxes horizontally

Question

[copied from GT FB group]

I want to have a date of birth that uses three boxes laid out horizontally side by side, one each for year, month, and day. I tried adding *classes: col-xs-4 to each *question but that didn't help.

Answer 1

This is one option. It doesn't work in mobile right now but works in desktop. It puts year/month/day next to each other: https://www.guidedtrack.com/programs/8909/edit

The below allowed to put three clickable boxes in a horizontal line, and apply separate colors to each. Of course, this requires embedding.

The GT code was simply adding a *classes keyword with the relevant classes below (depending on how many items you wanted). 

.price-display{
display: flex;
border: none !important;
text-align: center;
}
.price-display li:first-child{
background-color:cornsilk;
}
.price-display li{
background-color:#c3e6d0;
border-bottom: none !important;
margin: 0px 8px !important;
}
.price-display li:last-child{
background-color: cornsilk;
}
.price-display li:hover:last-child{
background-color: #f1e2a6 !important;
}
.price-display li:hover{
background-color: #8bd6a8 !important;
}
.price-display li:hover:first-child{
background-color: #f1e2a6 !important
}
/*#afcfea !important;*/
.price-display .fa{
font-size: 1.3em;
}
.price-display .answer_icon{
margin-right:.4em !important;
}
.price-display li.answer{
border-radius:8px !important;
}
.price-display-single li{
background-color: #c3e6d0 !important;
}
.price-display-single li:hover:first-child{
background-color: #8bd6a8 !important
}
.price-display-double li:last-child{
background-color: #c3e6d0 !important;
}
.price-display-double li:first-child{
background-color: cornsilk;
}
.price-display-double li:hover:last-child{
background-color: #8bd6a8 !important;
}
.price-display-triple li:first-child{
background-color: cornsilk !important;
}
.price-display-triple li{
background-color: #c3e6d0 !important;
}
.price-display-triple li:last-child{
background-color: cornsilk !important;
}
.price-display.tip{
display: none;
}
.price-display {
white-space: pre-wrap !important;
}
.price-display strong{
font-size: 2em;
display: block;
text-align: center;
margin-top: -24px;
}
.price-display em{
font-size: 1.5em;
display: block;
text-align: center;
}
.price-display u{
font-size: .4em !important;
}
/*The above seems to work for creating a line break, with spaces in GT (no idea why it preserves so well); if it ever doesn't suffice, consider trying to apply display:block or display:table to .price-display strong{ */
.price-display-single strong{
margin-top: 0px !important;
}