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; width: 49%; margin:auto; to .standortDescription19 and .jobDescription19 . Those will maintain the gaps between them.