Entourer une image par du texte (avec display)

Bonjour,
j'ai un petit soucis de conception, je dois entourer une image avec du texte, la consigne principale est que je n'ai ni le droit aux float ni au display:flex. Du coup je bloque.
J'ignore si c'est mon html qui le fait pas ou le css.

<section>                    
<figure>
                        <img src="img/globule.jpg" alt="globule">
                        <figcaption>Gluon du globule</figcaption>
                    </figure>
                    <p class="fig-text">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit enim animi tempore mollitia. Minima, dolore magnam. Debitis facere quae error blanditiis dolorum incidunt eos cumque hic, sed perferendis voluptatem harum.
                        Nemo minima facilis sint nulla aperiam fugiat accusamus ea obcaecati ex molestias culpa dicta omnis, enim provident praesentium perferendis unde nihil aliquam labore ipsam beatae. Corporis explicabo praesentium magni unde?
                        Mollitia eius sint culpa, tenetur reprehenderit ratione facilis molestias blanditiis impedit velit! Repellat, aliquam. Ad ipsam ipsum consectetur sint, illum dolor distinctio, quam odit asperiores delectus temporibus animi, debitis sunt.
                        Pariatur necessitatibus, id esse iste dolorum, facere illum nulla neque magnam debitis, fugit labore. Laborum eligendi provident libero ad minima ex molestiae quia velit, autem cum, perferendis placeat saepe ut?
                        Repudiandae itaque dicta fugiat id, voluptas at doloremque. Libero rem at iure aliquam repudiandae adipisci saepe reprehenderit fugit culpa, aperiam nostrum quasi vel voluptate inventore omnis nihil ad. Qui, necessitatibus.
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit earum nesciunt consequatur, est mollitia, esse debitis veniam dolore corrupti dicta magnam iusto libero placeat perferendis minus tempora deleniti, sapiente consequuntur?
                        Odio ea sed, officiis excepturi soluta sapiente exercitationem enim error placeat harum earum, veniam temporibus. Inventore est officiis optio fuga et! Officiis consequatur voluptatibus ducimus culpa blanditiis quibusdam soluta debitis?
                    </p>
                </section>

.second-section figure {
    margin-left: -40px;
    width: 50%;
}

.second-section img {
    width: 100%;
    box-shadow: 5px 5px 10px #ccc, 0 -5px 10px #ccc;
}

.second-section figcaption {
    margin-left: 6em;
    color: #777;
    text-align: center;
    font-size: 12px;
    font-style: italic;
}

La marge négative sur ma figure est dû à display: table qui est utilisé plus haut.



Merci d'avance
Modifié par Don-pasqual (31 Mar 2021 - 18:47)

Bonjour,
le droit ni aux float ni au display:flex !!! Et grid, on a le droit ? Parce qu'un modérateur a proposé ici il n'y a pas longtemps une solution avec grid sur le texte qui entoure une image.
En conception web, on a déjà assez de problèmes avec le code pour ne pas se coller des restrictions de cette sorte.
Plus de précisions sur le problème...