Positioning cell elements in css grid layout

I am trying to use the display:table css option to create a page divided in cell-like blocks.

However, I would like the content in every cell to be independent from the content in the other cells, i.e. not to be positioned in relation to the elements inside the other cells. Here when I put an image in my first cell, the content in the other one is aligned with the image and it does not reach the top of the page.

Does someone please have a tip to make it right ? (i.e. position the content of the right-hand side cell at the top of the page ?)

I tried to play with the display, float and clear options, but I couldn't make it work. I use a table-row container inside a css table, in which I create two cells. I also tried to use columns instead of a row, but I need the row structure to have cells of the same length. Here is my code:

<!DOCTYPE HTML>

<html lang="en-US">

  <head>
    <meta charset="UTF-8">
  </head>
 
  <body style="color:black">
 
    <div style="display:table">
        
        <div style="display:table-row">
        
            <div style="display:table-cell">
                <img src="./frog.jpg" width="180">
                <p>My image</p>
            </div>
        
            <div style="display:table-cell;float:left">
                <p>Interneciva Claudius pristinae antehac admodum subversa potens interneciva coloniam Caesar quam oppida praeter 
                nimium ut regis exornant civitates et interneciva deduxit vestigia Isaura oppida pristinae pristinae subversa 
                antehac Caesar Isaura Caesar coloniam regis Caesar Claudius regis nimium</p>
            </div>
        </div>
    </div>
  </body>
</html>

And here is the output:

cell-display-css-output

Solution

Here is the code you asked for:

Here the problem is that the vertical alignment keeps the content down. So change vertical alignment to top using : vertical-align: top;

<html>
<head>
  <meta charset="UTF-8">
</head>

<body style="color:black">

<div style="display:table">
    
    <div style="display:table-row;display:inline-block;">
    
        <div style="display:table-cell;">
            <img src="./frog.jpg" width="180">
            <p>My image</p>
        </div>
    
        <div style="display:table-cell;vertical-align: top;">
            Interneciva Claudius pristinae antehac admodum subversa potens interneciva coloniam Caesar quam oppida praeter 
            nimium ut regis exornant civitates et interneciva deduxit vestigia Isaura oppida pristinae pristinae subversa 
            antehac Caesar Isaura Caesar coloniam regis Caesar Claudius regis nimium
        </div>
    </div>
</div>

Hope this Helps 😊