Удаление пространства между двумя элементами Flexbox

Question

Я создал небольшой виджет для вакансий, который вы должны увидеть здесь. Я просто хочу, чтобы «место» всегда было прямо рядом с «описанием». Теперь есть огромный пробел.

Align-items: flex-start, похоже, не работает так, как описано в этом форуме. Поля: авто тоже не работает. Нет ли команды, чтобы настроить предыдущий элемент или что-то в этом роде? Я думаю, что flexbox / css очень запутанный и слишком сложный. Спасибо за ваше время.

        .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

Как это?

        .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>

Проблема в том, что вы указали justify-content: space-between для .firstRow, а width: 49%; margin:auto; для .standortDescription19 и .jobDescription19. Те будут поддерживать промежутки между ними.