Let's look at the ui.R file necessary to achieve this. The server.R file remains the same as in the previous example. We'll take breaks as we step through the code to understand what's happening. We'll define the title a little differently here, just to make things a bit different. The actual title itself goes in the  h2() HMTL helper function, and we use standard inline markup to select the font, color, and size, as shown. The title is given as an argument to the fluidPage() function; this gives the browser window its title (it's automatically set by titlePanel(), but we're not using that here):

fluidPage(
  title = "Gapminder",
  
  h2("Gapminder explorer",
     style = "font-family: 'Impact'; color: purple; font-size: 32px;"), 

Now, we add in a row of UI elements using the fluidRow() function and define two equal columns within this row. Notice the use of wellPanel() around sliderInput(). This places the input inside a panel and gives it a better, more defined appearance next to the other UI elements, as well as filling the horizontal width of the column:

fluidRow(
  column(6,
    wellPanel(
      sliderInput("year",
      "Years included",
      min = 1952,
      max = 2007,
      value = c(1952, 2007),
      sep = "",
      step = 5
 ))
),
  column(6,
    p("Map data is from the most recent year in the selected range",
      style = "text-align: center;"))

Next, we add a horizontal rule to break the screen up a bit and the two output items, both themselves placed within fluidRow():

hr(),
 
fluidRow(
 
  column(6, plotOutput("trend")),
  column(6, leafletOutput("map"))
),

And add one more fluid row, to place a checkbox where you can choose if you want a trend line and the textual summary, both placed here so they are underneath the relevant graph:

  fluidRow(
    column(6, 
           checkboxInput("linear", label = "Add trend line?", 
                         value = FALSE),
           textOutput("summary")
    )
  )