Removing space between two flexbox items

Question

I have built a little widget for Jobs which you should see here. I just want that the "place" is always directly next to the "Description". Now there is a huge gap.

Align-items: flex-start does not seem to work like explained in this forum. Margins:auto dont seem to work either. Is there no command align yourself to the previous item or something ? I think flexbox/css is very confusing and much too complicated Thanks for your time.

        .firstRow{

            width:100%;

            display: flex;

            flex-direction:row;
            
            flex-wrap:wrap;
            
            justify-content: space-between;
            
            align-content: flex-start;

        }       

 

        .Wrapper19 {

          border: 1px solid #dadada;

          display: flex;
          
          
          width:100%;

          align-items: center;

          padding:20px;

          box-shadow: 0 0 5px lightgrey;

          margin: 10px;

        }

        .SubWrapper19 {

          width:100%;

          display: flex;
          
          flex-direction:column;
          

        }
 

        .jobDescription19{

            width:100%;

            word-break: break-word;

            font-size: 150%;

        }

 

        .placeDescription19{

           width:49%;

            word-break: break-word;

            font-size: 100%;
            
            margin:auto;

        }

 

        .standortDescription19{
            
            margin:auto;

            width: 49%;

        }

        .linkText19{
            
            width:20%;
        justify-content: flex-end;
        
        
        }
        

<div class="Wrapper19">
   <div class ="SubWrapper19">
   <div class="jobDescription19">Job</div>
   <div class="firstRow">
    <p class="placeDescription19">Description</p><p class="standortDescription19" style="font-size:100%;">Place</p>
   </div>
   </div>
      <p style="font-size:110%;" class="linkText19">LinkText</p>
           <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='{{jobLink19.value}}'></a>
</div>

Answer 1

Like this?

        .firstRow{
            width:100%;
            display: flex;
            flex-direction:row;
            flex-wrap:wrap;
            /*justify-content: space-between;*/
            align-content: flex-start;
        }      

        .Wrapper19 {
          border: 1px solid #dadada;
          display: flex;
          width:100%;
          align-items: center;
          padding:20px;
          box-shadow: 0 0 5px lightgrey;
          margin: 10px;
        }

        .SubWrapper19 {
          width:100%;
          display: flex;
          flex-direction:column;
        }
 

        .jobDescription19{
            width:100%;
            word-break: break-word;
            font-size: 150%;
        }

        .placeDescription19{
           /*width:49%;*/
            word-break: break-word;
            font-size: 100%;
            /*margin:auto;*/
            
            /* add a little space*/
            padding-right: 5px;
        }

        .standortDescription19{
            /*margin:auto;*/
            /*width: 49%;*/
        }

        .linkText19{
            width:20%;
            justify-content: flex-end;
        }
        

<div class="Wrapper19">
   <div class ="SubWrapper19">
   <div class="jobDescription19">Job</div>
   <div class="firstRow">
    <p class="placeDescription19">Description</p><p class="standortDescription19" style="font-size:100%;">Place</p>
   </div>
   </div>
      <p style="font-size:110%;" class="linkText19">LinkText</p>
           <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='{{jobLink19.value}}'></a>
</div>

The problem is that you have specified justify-content: space-between to .firstRow, and width: 49%; margin:auto; to .standortDescription19 and .jobDescription19. Those will maintain the gaps between them.