How can I put my title and text next to my image?-CodePudding

I'm trying to get my title & text next to my image, but it doesn't want to. Anybody to help me ? Thank you

That's the final result I'd like to get : Result

Here's my CSS code :

section .articleactu {
    display: ;
    position: relative;
    margin-left: 0px;
}

.articleactu img {
    max-width: 100%;
    margin-left: 420px;
    margin-top: 10%;
    border-radius: 15px;
    width: 14%;
}

.articleactu p {
    display: flex;
    margin-left: 420px;
}

.articleactu h2 {
    margin-left: 420px;
}

and here's my HTML code :

 <section>
<article class="articleactu">
  <h2> L'ACTUALITÉ </h2>
  <div class="g">
      <img src="images/gtaarticle.jpeg" alt="Article GTA déçu" class="center">
    <p>GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus ! </p>
    <p>Il y a pleins de bugs dans le jeu qui agacent les joueurs</p>
    <p>Publié le 25 novembre</p>
</article>
</section>

CodePudding user response：

body {
      font-family: sans-serif;
    }

    section {
      border-bottom: 1px solid #ccc;
      padding: 24px;

    }
    .articleactu {
      grid-column: 1 / -1;
      grid-gap: 36px;
      display: grid;
      grid-template-columns: 200px auto;
      flex-direction: column;
    }

    .articleactu img {
      border-radius: 15px;
     max-width: 200px;

    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>
  <section>
    <h2> L'ACTUALITÉ </h2>
    <article class="articleactu">
      <img src="https://i.stack.imgur.com/cTwUc.jpg" alt="Article GTA déçu" class="center">
      <div>
        <p>GTA : THE TRILOGY DEFINITIVE EDITION, les fans sont déçus ! </p>
        <p>Il y a pleins de bugs dans le jeu qui agacent les joueurs</p>
        <p>Publié le 25 novembre</p>
      </div>

    </article>
  </section>

</body>


</html>