How can I align some text next to an image in Rshiny?

Question

For my R shiny dashboard I want to add some information about the team members. Here I want to show a picture of each team member and then add some information right to the image. I can not get this working.

What I have now:

  tabPanel('Team & Contact', 
           tags$div(
              tags$h1('Project team')
             , tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')
             , tags$br(), h6('Person 1')
             , h6('Senior Scientist')
             , h6('Some very interesting text about person 1.')
             , tags$br()
             , tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')
             , h6('Person 2')
             , h6('Researcher')
             , h6('Some very interesting text about person 2.')
             , tags$br()
             , tags$img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')
             , tags$br(), h6('Person 3')
             , h6('Data Scientist')
             , h6('Some very interesting text about person 3.')
           )
  ))


server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

This results in: Output now

But what I want is this: --> the image on the left side and text on the right side, instead of under each other --> the image aligned in the middle of all the text

Desired output

Answer 1

Here is a css solution.

tabPanel('Team & Contact', 
         tags$style("#project-grid {
                      display: grid;
                      grid-template-columns: 100px 1fr;
                      grid-gap: 10px;
                      }"),
         h1('Project team'),
         div(id = "project-grid",
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 1'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 1. Some very interesting text about person 1. Some very interesting text about person 1. Some very interesting text about person 1.')),
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 2'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 2')),
             div(img(src = 'Man_1_rood.jpg', style = 'border-radius: 50%', width = '100px')),
             div(h4('Person 3'),
                 h5('Senior Scientist'),
                 p('Some very interesting text about person 3. Some very interesting text about person 3.'))
         )