<div class="row">

                    <div class="col-sm-6">
                     <!-- image side -->

                      <div class="article-cover">
                        <img src="https://wallpaperaccess.com/full/2386802.jpg" alt="Cover of the article containing elements related to knowledge organization and symbolic to the new changes made in XS" class="ïmg-responsive whatsnew-img">
                      </div>

                    </div>

                    <div class="col-sm-6">
                     <!-- content side -->

                      <h2 class="article-title">The new Task Manager (Pro)</h2>
                      <div id="xdocAuthors" class="xdocCreation"><b>by Dorina Anton</b> 7 August 2023</div>

                      <span class="category-tag">Pro Apps</span>
                      <span class="category-tag">XS</span>
                      <span class="category-tag">New release</span>

                      <p class="article-text">
                        XWiki SAS has launched the Task Manager Application (Pro), a business-ready application, part of
                        the paid apps suite <span class="wikiexternallink"><a href="http://extensions.xwiki.org">available on the dedicated
                        store</a></span>. Task Manager (Pro) allows you to create and manage tasks inside a wiki. It provides various
                        macros to display single or multiple tasks filtered using numerous criteria and it supports the
                        migration of Confluence tasks and reports to XWiki. Read the full article to learn about all its
                        features and how to install it.
                      </p>

                      <button id="whatsnew-btn" class="btn btn-primary ">Read more</button>
                    </div>

                  </div>

.category-tag {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;

   display: inline-block;
   min-width: 10px;
   padding: 5px 10px;
   font-size: 12px;

   line-height: 1;
   color: @headings-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   background-color: @dropdown-link-hover-bg;
   border-radius: 999px;
}

.whatsnew-img {
   max-height: 300px;

   margin-bottom: 2.5rem;
   border-radius: 7px;

}


.article-cover {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
}

.article-text {
   text-align: justify;
   text-justify: inter-word;
}

.article-title {
   margin-top: 0px;

}

#whatsnew-btn {
   margin-top: 5px;
}