R markdown multi column layout - how to fix the width of a column using CSS & HTML <div>?

Question

Dear helpful community,

I have been trying for hours to find a way to place two elements side-by-side in R markdown while controlling the width of the columns in the layout (for html output).

I have found this thread and implemented it very fast. However, I don't know how to force the column width to be, for instance, 10% & 90%.

I want to put a logo next to some text. According to the above-mentioned thread, I first create a row, and I nest two columns in it. I am aware that the .column {flex;50%} is probably impacting what I can do, but I just can't figure the syntax that I should use. Same for two blocks of text together in a column next to a table in another column (70% & 30% of the width ideally).

Note: I'd rather not have to create a .css file for styling because I need to apply the script to many individual result file, so I need a simple embedded solution. I don't want a .css file that I will need to copy/update/explain to coworkers.

I tried all kinds of column width syntax that I could find, the only one that did impact, as suggested here, was writing <div class = "col-4"> but changing the digit to -1 or -8 did not change the outcome and the column was way too big and the other one too shrunk. Now when I try it again, it doesn't work anymore, I'm super confused.

Also, funny that the padding style="padding-right:50px;" syntax is working, but not the width syntax such as width = "block-size: 4000px;".

Thank you very much for your help!

Here is my code (sorry for the logo that you'll have to replace with something else):

---
title: Report of analyses
output:
  html_document:
    theme: yeti
---

<style type="text/css">
   .main-container {max-width: 80%;}
   .row {display: flex;}
   .column {flex;50%}
</style>


<div class = "row">
<div class = "column">
![](C:/NKUA-logo-red.png){#id .class width=10% height=10%}
</div>

<div class = "column">
*I want this affiliation to be wider, like 90% of the total width with the logo to the left.*


Department of Clinical Therapeutics, 
<br> *Report author: Jane Doe, PharmD, PhD*
</div>
</div>

<div class = "row">
<div class = "column" style="padding-right:50px;">
*I want both these paragraphs 1.&2. to be wider, like 70% of the total width.*

### 1. Pathology interpretation
**Technical summary**: Lorem ipsum dolor sit amet

### 2. Case details and history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
</div>

<div class = "column">
*I want this table to be more narrow to the right, like 30% of the total width.*

### 3. Information
```{r echo = FALSE}
library(kableExtra)
kbl(iris[1:10,])

Answer 1

PDF requires another way to do it, and it uses LaTeX.

Answer 2

You could use the bootstrap grid options, i.e. each row is composed of twelve units which you can divide according to your liking, e.g.

---
title: Report of analyses
output:
  html_document:
    theme: yeti
---

<div class = "row">
  
<div class = "col-md-1">
![](images/rstudio_logo.png){}
</div>

<div class = "col-md-11">

Department of Clinical Therapeutics, 
<br> *Report author: Jane Doe, PharmD, PhD*
</div>

</div>

<div class = "row">
<div class = "col-md-8" style="padding-right:50px;">
*I want both these paragraphs 1.&2. to be wider, like 70% of the total width.*

### 1. Pathology interpretation
**Technical summary**: Lorem ipsum dolor sit amet

### 2. Case details and history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
</div>

<div class = "col-md-4">
*I want this table to be more narrow to the right, like 30% of the total width.*

### 3. Information
```{r echo = FALSE}
library(kableExtra)
kbl(iris[1:10,])

---

Note: Even simpler when you can switch to quarto, see here for quarto's css grid.