title: R Shiny layout of blocks, rows and headers
body: <p>I'm finalizing my R Shiny app and I am struggling with the layout of blocks and headers. Since I have a lot of blocks, I've built my layout separately and coded it in the ui of my Shiny app using a combination of fluidRow and column. Usually each of my block then has a title, under the form p(...), followed by some information under the same form.</p>
  
  <p>Since I like the idea of having a "controls" side-bar panel, the blocks on the left side of my app are used to control the different inputs I use on the app. When the user does stuff, the blocks on the left side are the ones that are impacted and modified.</p>
  
  <p>I have a full row blocks that belong to the same "category". It is a dynamic UI that can have 1 to 8 blocks depending on a slider input the user can play with. What I am trying to achieve is to have one title line (either a paragraph, or a header, doesn't matter) the line above the blocks, then have the blocks, while keeping only one unit on the "control panel" on the left side.</p>
  
  <p>A few images to make it clearer:</p>
  
  <p><a href="https://i.imgur.com/Htt4oIK.jpg" rel="nofollow noreferrer">https://i.imgur.com/Htt4oIK.jpg</a> is what I currently have for most of my blocks. One line for title (blue), one line for content (green). Dark green is the general "row" and red are the "blocks". The code for this layout is the following:</p>
  
  <pre><code>fluidRow(
      column(4, wellPanel()),
      column(2, mainPanel(
          p("blue"),
          p("green")
      )),
      column(2, mainPanel()),
      column(2, mainPanel()),
      column(2, mainPanel())
  )
  </code></pre>
  
  <p>Now, that:</p>
  
  <p><a href="https://i.imgur.com/i728blL.jpg" rel="nofollow noreferrer">https://i.imgur.com/i728blL.jpg</a> is what I am trying to achieve, and I have not been able to reach that result yet. I have tried a couple of things:</p>
  
  <p>1) Using a different fluidRow for the title and for the contents. The problem with that is the formatting, since the control box on the left is part of the first row, it is constraining the height of the row itself, meaning the header will be much higher than the contents. It looks like this: <a href="https://i.imgur.com/sU0AEds.jpg" rel="nofollow noreferrer">https://i.imgur.com/sU0AEds.jpg</a>, and I want to cut down the useless space.</p>
  
  <p>Syntax for that would be:</p>
  
  <pre><code>fluidRow(
      column(4, wellPanel()),
      column(8, mainPanel(
          p("blue")
      ))
  ),
  fluidRow(
      column(4, mainPanel()),
      column(2, mainPanel(
          p("green")
      )),
      column(2, mainPanel()),
      column(2, mainPanel()),
      column(2, mainPanel())
  )
  </code></pre>
  
  <p>2) Nestling the sub-blocks within a larger column. The code for that would be like this:</p>
  
  <pre><code>fluidRow(
      column(4, wellPanel()),
      column(8, mainPanel(
          p("blue"),
          column(2, mainPanel(
              p("green")
          )),
          column(2, mainPanel()),
          column(2, mainPanel()),
          column(2, mainPanel())
      ))
  )
  </code></pre>
  
  <p>And the problem with that is that, somehow, columns within columns seem not to be behaving properly. Instead of having the width 2 columns occupying the whole space of my width 8 columns, they end up having a weird width and overlapping each other.</p>
  
  <p>Ideas? There might be an easy HMTL solution but I'm really not an expert in that.
  Thank you!</p>