css - How can I align input elements horizontally in rMarkdown flexdashboard -

they appear below each other default

--- title: "untitled" output:    flexdashboard::flex_dashboard:     orientation: rows     vertical_layout: fill runtime: shiny     ---  ```{r input}  numericinput(inputid="a",label=null,value = 5,min = 1,max = 15)  selectinput(inputid="b",label=null,c("x","y","z"))   ``` 

option 1:

wrap elements in additional div container id mygroup , add css styles individual child elements:

--- title: "untitled" output:    flexdashboard::flex_dashboard:     orientation: rows     vertical_layout: fill runtime: shiny     ---  <style> #mygroup > div {   width: 45% !important;   float: left !important;   margin: 10px !important; } </style>  ```{r input} div(numericinput(inputid="a",label=null,value = 5,min = 1,max = 15), selectinput(inputid="b",label=null,c("x","y","z")), id='mygroup') ``` 

option 2:

another option add individual class elements jquery:

--- title: "untitled" output:    flexdashboard::flex_dashboard:     orientation: rows     vertical_layout: fill runtime: shiny     ---  <style> .myclass {   width: 45% !important;   float: left !important;   margin: 10px !important; } </style>  ```{r input} numericinput(inputid="a",label=null,value = 5,min = 1,max = 15) selectinput(inputid="b",label=null,c("x","y","z")) ```  <script type="text/javascript">   $(document).ready(function() {     $('.form-group').addclass('myclass');   }); </script> 

each input element contained inside div container class form-group. select these div containers , add class myclass them, have defined above.

(the part $(document).ready(function() { ... }); says ... should executed, when document loaded.)