title: aligning variable numbers of textInputs in shiny
body: <p>I'm trying to place a button next to a textinput in Shiny. The amount of textInput and buttons vary with the amount of columns of an input dataframe.</p>
  <p>I am having trouble aligning them properly. I put each textInput and button in a div, with display:inline-block, but each div ends up aligning vertically instead of horizontally. I think it has something to do with margin/padding, I tried setting them to zero but it did not fix the issue.</p>
  <p>Example app:</p>
  <pre><code>library(shiny)
  ui &lt;- fluidPage(
    tagList(
      fluidRow(
          div(
              shiny::uiOutput(&quot;elements&quot;)
              ,style=&quot;display: inline-block;vertical-align:top; width: 100%;&quot;
          )
      )
    )
  )
  server &lt;- function(input, output, session) {
    df = data.frame(
        company = c('a', 'b', 'c', 'd'),
        bond = c(0.2, 1, 0.3, 0),
        equity = c(0.7, 0, 0.5, 1),
        cash = c(0.1, 0, 0.2, 0),
        stringsAsFactors = FALSE
    )
    output$elements &lt;- renderUI({
        # Initialize list of inputs
        inputTagList &lt;- tagList()
        # Define unique input id and label
        for(i in seq(ncol(df))){
            # sort id
            txtId &lt;- names(df)[i]
            buttonId &lt;- paste0(&quot;button-&quot;, names(df)[i])
            newInput &lt;- div(
              textInput(inputId = txtId, label = &quot;&quot;, valu = &quot;&quot;, &quot;80%&quot;)
              ,actionButton(id, &quot;up&quot;, class = &quot;btn-primary&quot;, style=&quot;width:20%&quot;)
              ,style=&quot;display: inline-block;vertical-align:top; width:20px;&quot;
            )
            # Append new input to list of existing inputs
            inputTagList &lt;- tagAppendChild(inputTagList, newInput)
        }
        # Return updated list of inputs
        inputTagList
    })
  }
  shinyApp(ui, server)
  
  </code></pre>