title: why left position does not work in javascript
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fn_paragraph_diaporama_controls = function () {
      if ($(window).width() &gt; 991) {
          if ($('.o-paragraph-diaporama').length &gt; 0) {
              $('.o-paragraph-diaporama').each(function () {
                  $(this).find('.tns-controls').css("left", $(this).find('.o-paragraph-diaporama__item').width() - $(this).find('.tns-controls').width());
              });
          }
  
          if ($('.o-paragraph-temoignage').length &gt; 0) {
              $('.o-paragraph-temoignage').each(function () {
                  $(this).find('.tns-controls').css("left", $(this).find('.o-paragraph-temoignage__item').width() - $(this).find('.tns-controls').width());
              });
          }
  
          if ($('.o-paragraph-partenaires').length &gt; 0) {
              $('.o-paragraph-partenaires').each(function () {
                  $(this).find('.tns-controls').css("left", $(this).find('.o-paragraph-partenaires__item').width() - $(this).find('.tns-controls').width());
              });
          }
      }
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.o-paragraph-diaporama {
       position: relative;
       z-index: 1;
       margin-top: 5rem;
       margin-bottom: 5rem;
       background-color: teal;
  }
   .o-paragraph-diaporama .tns-controls {
       display: inline-flex;
       position: absolute;
       bottom: 5rem;
       right: 0;
       width: 10rem;
       z-index: 1039;
  }
   .o-paragraph-diaporama .btn-controls {
       font-size: 1.6rem;
  }
   .o-paragraph-diaporama .btn-controls[disabled] {
       opacity: 0.4;
  }
   .o-paragraph-diaporama__item {
       position: relative;
       margin-bottom: 5rem;
       height: 41.3rem;
  }
   .o-paragraph-diaporama__img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: -1;
  }
   .o-paragraph-diaporama__img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
  }
   .o-paragraph-diaporama__img figure {
       width: 100%;
       height: 100%;
  }
   .o-paragraph-diaporama__img figcaption {
       position: absolute;
       top: 100%;
       right: 0;
  }
   .o-paragraph-diaporama__text {
       display: flex;
       align-items: flex-end;
       padding: 2rem 2rem 7rem 2rem;
       height: 100%;
       line-height: 2;
  }
   .o-paragraph-diaporama__text::after {
       content: "";
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
  }
   .o-paragraph-diaporama__title {
       margin-bottom: 0;
       line-height: 1.5;
  }
   .o-paragraph-diaporama__lead {
       margin-bottom: 1.5rem;
  }
   .o-paragraph-diaporama__text-inner {
       position: relative;
       z-index: 1;
  }
   .o-paragraph-diaporama__fullscreen {
       position: absolute;
       top: 0;
       left: 0;
       z-index: 2;
  }
   .o-paragraph-diaporama__item-wrapper:not(.tns-slide-active) {
       opacity: 0.7;
  }
   .o-paragraph-diaporama__item-wrapper:not(.tns-slide-active) .o-paragraph-diaporama__text, .o-paragraph-diaporama__item-wrapper:not(.tns-slide-active) .o-paragraph-diaporama__fullscreen {
       visibility: hidden;
  }
  
  .tns-outer{padding:0 !important}.tns-outer [hidden]{display:none !important}.tns-outer [aria-controls],.tns-outer [data-action]{cursor:pointer}.tns-slider{-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider&gt;.tns-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel{white-space:nowrap}.tns-horizontal.tns-subpixel&gt;.tns-item{display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel&gt;.tns-item{float:left}.tns-horizontal.tns-carousel.tns-no-subpixel&gt;.tns-item{margin-right:-100%}.tns-no-calc{position:relative;left:0}.tns-gallery{position:relative;left:0;min-height:1px}.tns-gallery&gt;.tns-item{position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery&gt;.tns-slide-active{position:relative;left:auto !important}.tns-gallery&gt;.tns-moving{-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth{display:inline-block}.tns-lazy-img{-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete{opacity:1}.tns-ah{-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}.tns-transparent{opacity:0;visibility:hidden}.tns-fadeIn{opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut{opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix{white-space:nowrap}.tns-vpfix&gt;div,.tns-vpfix&gt;li{display:inline-block}.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after{content:'';display:table;clear:both}.tns-t-ct&gt;div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"&gt;&lt;/script&gt;
  
  &lt;div class="o-paragraph-diaporama"&gt;
      &lt;div class="container-content"&gt;
          &lt;div class="tns-outer" id="tns1-ow"&gt;
              &lt;div class="tns-controls" aria-label="Carousel Navigation" tabindex="0" style="background: red; left: -100px;"&gt;
                  &lt;button type="button" class="btn btn-controls btn--plain btn--primary btn-icon-only" data-controls="prev" tabindex="-1" aria-controls="tns1" disabled=""&gt;
                      &lt;span class="btn-text sr-only"&gt;Slide précédente&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-controls btn--plain btn--primary btn-icon-only" data-controls="next" tabindex="-1" aria-controls="tns1"&gt;
                      &lt;span class="btn-text sr-only"&gt;Slide suivante&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="tns-liveregion tns-visually-hidden" aria-live="polite" aria-atomic="true"&gt;slide
                  &lt;span class="current"&gt;1&lt;/span&gt;
                  of 4&lt;/div&gt;
              &lt;div id="tns1-mw" class="tns-ovh"&gt;
                  &lt;div class="tns-inner" id="tns1-iw"&gt;
                      &lt;div class="js-paragraph-diaporama  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns1" style="transition-duration: 0s; transform: translate3d(0%, 0px, 0px);"&gt;
                          &lt;div class="o-paragraph-diaporama__item-wrapper tns-item tns-slide-active" id="tns1-item0"&gt;
                              &lt;div class="o-paragraph-diaporama__item text-white"&gt;
                                  &lt;div class="o-paragraph-diaporama__text"&gt;
                                      &lt;div class="o-paragraph-diaporama__text-inner"&gt;
                                          &lt;p class="o-paragraph-diaporama__title h3"&gt;Item 01 - Title&lt;/p&gt;
                                          &lt;p class="o-paragraph-diaporama__lead"&gt;Item 01 - Lead&lt;/p&gt;
                                          &lt;div class="o-paragraph-diaporama__btn"&gt;
                                              &lt;a href="#" class="btn btn-active-effect btn-width--md btn--ghost btn--white"&gt;Item 01 - Bouton
                                              &lt;/a&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="o-paragraph-diaporama__img"&gt;
                                      &lt;figure class="figure"&gt;
                                          &lt;img src="http://placeimg.com/730/410/nature" alt=""&gt;
                                          &lt;figcaption class="figure-caption text-right"&gt;Item 01 - Image caption&lt;/figcaption&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type="button" class="btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen" data-group="group-diaporama-01" data-modaal-content-source="http://placeimg.com/1730/971/nature" data-modaal-desc="Item 01 - Image caption" title="Afficher en plein écran" data-modaal-scope="modaal_1632148741508c9547288a02bf"&gt;
                                      &lt;span class="icon-fullscreen" aria-hidden="true"&gt;&lt;/span&gt;
                                      &lt;span class="sr-only"&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="o-paragraph-diaporama__item-wrapper tns-item" id="tns1-item1" aria-hidden="true" tabindex="-1"&gt;
                              &lt;div class="o-paragraph-diaporama__item text-white"&gt;
  
                                  &lt;div class="o-paragraph-diaporama__img"&gt;
                                      &lt;figure class="figure"&gt;
                                          &lt;img src="http://placeimg.com/730/410/tech" alt=""&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type="button" class="btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen" data-group="group-diaporama-01" data-modaal-content-source="http://placeimg.com/850/850/tech" title="Afficher en plein écran" data-modaal-scope="modaal_1632148741508b3607805b0e3"&gt;
                                      &lt;span class="icon-fullscreen" aria-hidden="true"&gt;&lt;/span&gt;
                                      &lt;span class="sr-only"&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="o-paragraph-diaporama__item-wrapper tns-item" id="tns1-item2" aria-hidden="true" tabindex="-1"&gt;
                              &lt;div class="o-paragraph-diaporama__item text-white"&gt;
                                  &lt;div class="o-paragraph-diaporama__text"&gt;
                                      &lt;div class="o-paragraph-diaporama__text-inner"&gt;
                                          &lt;p class="o-paragraph-diaporama__title h3"&gt;Item 03 - soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam repellat&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="o-paragraph-diaporama__img"&gt;
                                      &lt;figure class="figure"&gt;
                                          &lt;img src="http://placeimg.com/730/410/arch" alt=""&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type="button" class="btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen" data-group="group-diaporama-01" data-modaal-content-source="http://placeimg.com/1250/650/arch" title="Afficher en plein écran" data-modaal-scope="modaal_163214874150860497234fa8b1"&gt;
                                      &lt;span class="icon-fullscreen" aria-hidden="true"&gt;&lt;/span&gt;
                                      &lt;span class="sr-only"&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="o-paragraph-diaporama__item-wrapper tns-item" id="tns1-item3" aria-hidden="true" tabindex="-1"&gt;
                              &lt;div class="o-paragraph-diaporama__item text-white"&gt;
                                  &lt;div class="o-paragraph-diaporama__text"&gt;
                                      &lt;div class="o-paragraph-diaporama__text-inner"&gt;
                                          &lt;p class="o-paragraph-diaporama__title h3"&gt;Item 04 - Title&lt;/p&gt;
                                          &lt;p class="o-paragraph-diaporama__lead"&gt;Item 04 - soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam&lt;/p&gt;
                                          &lt;div class="o-paragraph-diaporama__btn"&gt;
                                              &lt;a href="#" class="btn btn-active-effect btn-width--md btn--plain btn--accent"&gt;Item 04 - Bouton
                                              &lt;/a&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class="o-paragraph-diaporama__img"&gt;
                                      &lt;figure class="figure"&gt;
                                          &lt;img src="http://placeimg.com/730/410/nature" alt=""&gt;
                                          &lt;figcaption class="figure-caption text-right"&gt;Item 04 - Image caption&lt;/figcaption&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type="button" class="btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen" data-group="group-diaporama-01" data-modaal-content-source="http://placeimg.com/1730/971/nature" data-modaal-desc="Item 04 - Image caption" title="Afficher en plein écran" data-modaal-scope="modaal_1632148741508972b5688046a6"&gt;
                                      &lt;span class="icon-fullscreen" aria-hidden="true"&gt;&lt;/span&gt;
                                      &lt;span class="sr-only"&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Am trying to make a position left on butons according to the item width.
  when i make a <code>console.log</code> to see the left value, it appears on the browser console, but when i assign it to the left <code>proprety</code> to the buttons, it does not work.</p>
  <p>this is my js:</p>
  <pre><code>if ($('.o-paragraph-diaporama__item').length &gt; 0) {
      $('.o-paragraph-diaporama__item').each(function () {
          item    = $(this);
          buttons = $('.tns-controls');
          left = $(this).width() - buttons.width();
          buttons.css({
              &quot;background&quot;: &quot;red&quot;,
              left: left
          });
          console.log(&quot;left  &quot;, left);
          console.log(&quot;item width &quot;, item.width() );
      });
  }
  </code></pre>
  <p>My HTML :</p>
  <pre><code>&lt;div class=&quot;o-paragraph-diaporama&quot;&gt;
      &lt;div class=&quot;container-content&quot;&gt;
          &lt;div class=&quot;tns-outer&quot; id=&quot;tns1-ow&quot;&gt;
              &lt;div class=&quot;tns-controls&quot; aria-label=&quot;Carousel Navigation&quot; tabindex=&quot;0&quot; style=&quot;background: red; left: -100px;&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-controls btn--plain btn--primary btn-icon-only&quot; data-controls=&quot;prev&quot; tabindex=&quot;-1&quot; aria-controls=&quot;tns1&quot; disabled=&quot;&quot;&gt;
                      &lt;span class=&quot;btn-text sr-only&quot;&gt;Slide précédente&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-controls btn--plain btn--primary btn-icon-only&quot; data-controls=&quot;next&quot; tabindex=&quot;-1&quot; aria-controls=&quot;tns1&quot;&gt;
                      &lt;span class=&quot;btn-text sr-only&quot;&gt;Slide suivante&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;tns-liveregion tns-visually-hidden&quot; aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot;&gt;slide
                  &lt;span class=&quot;current&quot;&gt;1&lt;/span&gt;
                  of 4&lt;/div&gt;
              &lt;div id=&quot;tns1-mw&quot; class=&quot;tns-ovh&quot;&gt;
                  &lt;div class=&quot;tns-inner&quot; id=&quot;tns1-iw&quot;&gt;
                      &lt;div class=&quot;js-paragraph-diaporama  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal&quot; id=&quot;tns1&quot; style=&quot;transition-duration: 0s; transform: translate3d(0%, 0px, 0px);&quot;&gt;
                          &lt;div class=&quot;o-paragraph-diaporama__item-wrapper tns-item tns-slide-active&quot; id=&quot;tns1-item0&quot;&gt;
                              &lt;div class=&quot;o-paragraph-diaporama__item text-white&quot;&gt;
                                  &lt;div class=&quot;o-paragraph-diaporama__text&quot;&gt;
                                      &lt;div class=&quot;o-paragraph-diaporama__text-inner&quot;&gt;
                                          &lt;p class=&quot;o-paragraph-diaporama__title h3&quot;&gt;Item 01 - Title&lt;/p&gt;
                                          &lt;p class=&quot;o-paragraph-diaporama__lead&quot;&gt;Item 01 - Lead&lt;/p&gt;
                                          &lt;div class=&quot;o-paragraph-diaporama__btn&quot;&gt;
                                              &lt;a href=&quot;#&quot; class=&quot;btn btn-active-effect btn-width--md btn--ghost btn--white&quot;&gt;Item 01 - Bouton
                                              &lt;/a&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class=&quot;o-paragraph-diaporama__img&quot;&gt;
                                      &lt;figure class=&quot;figure&quot;&gt;
                                          &lt;img src=&quot;http://placeimg.com/730/410/nature&quot; alt=&quot;&quot;&gt;
                                          &lt;figcaption class=&quot;figure-caption text-right&quot;&gt;Item 01 - Image caption&lt;/figcaption&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type=&quot;button&quot; class=&quot;btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen&quot; data-group=&quot;group-diaporama-01&quot; data-modaal-content-source=&quot;http://placeimg.com/1730/971/nature&quot; data-modaal-desc=&quot;Item 01 - Image caption&quot; title=&quot;Afficher en plein écran&quot; data-modaal-scope=&quot;modaal_1632148741508c9547288a02bf&quot;&gt;
                                      &lt;span class=&quot;icon-fullscreen&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                      &lt;span class=&quot;sr-only&quot;&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;o-paragraph-diaporama__item-wrapper tns-item&quot; id=&quot;tns1-item1&quot; aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot;&gt;
                              &lt;div class=&quot;o-paragraph-diaporama__item text-white&quot;&gt;
  
                                  &lt;div class=&quot;o-paragraph-diaporama__img&quot;&gt;
                                      &lt;figure class=&quot;figure&quot;&gt;
                                          &lt;img src=&quot;http://placeimg.com/730/410/tech&quot; alt=&quot;&quot;&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type=&quot;button&quot; class=&quot;btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen&quot; data-group=&quot;group-diaporama-01&quot; data-modaal-content-source=&quot;http://placeimg.com/850/850/tech&quot; title=&quot;Afficher en plein écran&quot; data-modaal-scope=&quot;modaal_1632148741508b3607805b0e3&quot;&gt;
                                      &lt;span class=&quot;icon-fullscreen&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                      &lt;span class=&quot;sr-only&quot;&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;o-paragraph-diaporama__item-wrapper tns-item&quot; id=&quot;tns1-item2&quot; aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot;&gt;
                              &lt;div class=&quot;o-paragraph-diaporama__item text-white&quot;&gt;
                                  &lt;div class=&quot;o-paragraph-diaporama__text&quot;&gt;
                                      &lt;div class=&quot;o-paragraph-diaporama__text-inner&quot;&gt;
                                          &lt;p class=&quot;o-paragraph-diaporama__title h3&quot;&gt;Item 03 - soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam repellat&lt;/p&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class=&quot;o-paragraph-diaporama__img&quot;&gt;
                                      &lt;figure class=&quot;figure&quot;&gt;
                                          &lt;img src=&quot;http://placeimg.com/730/410/arch&quot; alt=&quot;&quot;&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type=&quot;button&quot; class=&quot;btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen&quot; data-group=&quot;group-diaporama-01&quot; data-modaal-content-source=&quot;http://placeimg.com/1250/650/arch&quot; title=&quot;Afficher en plein écran&quot; data-modaal-scope=&quot;modaal_163214874150860497234fa8b1&quot;&gt;
                                      &lt;span class=&quot;icon-fullscreen&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                      &lt;span class=&quot;sr-only&quot;&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;o-paragraph-diaporama__item-wrapper tns-item&quot; id=&quot;tns1-item3&quot; aria-hidden=&quot;true&quot; tabindex=&quot;-1&quot;&gt;
                              &lt;div class=&quot;o-paragraph-diaporama__item text-white&quot;&gt;
                                  &lt;div class=&quot;o-paragraph-diaporama__text&quot;&gt;
                                      &lt;div class=&quot;o-paragraph-diaporama__text-inner&quot;&gt;
                                          &lt;p class=&quot;o-paragraph-diaporama__title h3&quot;&gt;Item 04 - Title&lt;/p&gt;
                                          &lt;p class=&quot;o-paragraph-diaporama__lead&quot;&gt;Item 04 - soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam soluta provident quibusdam nemo et in, alias nihil atque eaque velit aperiam&lt;/p&gt;
                                          &lt;div class=&quot;o-paragraph-diaporama__btn&quot;&gt;
                                              &lt;a href=&quot;#&quot; class=&quot;btn btn-active-effect btn-width--md btn--plain btn--accent&quot;&gt;Item 04 - Bouton
                                              &lt;/a&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
  
                                  &lt;div class=&quot;o-paragraph-diaporama__img&quot;&gt;
                                      &lt;figure class=&quot;figure&quot;&gt;
                                          &lt;img src=&quot;http://placeimg.com/730/410/nature&quot; alt=&quot;&quot;&gt;
                                          &lt;figcaption class=&quot;figure-caption text-right&quot;&gt;Item 04 - Image caption&lt;/figcaption&gt;
                                      &lt;/figure&gt;
                                  &lt;/div&gt;
  
                                  &lt;button type=&quot;button&quot; class=&quot;btn btn--plain btn--primary btn-icon-only o-paragraph-diaporama__fullscreen&quot; data-group=&quot;group-diaporama-01&quot; data-modaal-content-source=&quot;http://placeimg.com/1730/971/nature&quot; data-modaal-desc=&quot;Item 04 - Image caption&quot; title=&quot;Afficher en plein écran&quot; data-modaal-scope=&quot;modaal_1632148741508972b5688046a6&quot;&gt;
                                      &lt;span class=&quot;icon-fullscreen&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
                                      &lt;span class=&quot;sr-only&quot;&gt;Afficher en plein écran&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What i have :
  <a href="https://i.stack.imgur.com/y3rwP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y3rwP.jpg" alt="enter image description here" /></a></p>
  <p>What i should have :
  <a href="https://i.stack.imgur.com/RfnCm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RfnCm.jpg" alt="enter image description here" /></a></p>