Flex: select the first and last item on each line in a wrapped flex

Question

I will provide some context. In this project I need to introduce a few Hebrew words with their Spanish translation below them. I need the Hebrew first and last words of each line to be completely aligned.

The problem is that to align the first words, every first word (.field) should have align-items: flex-start and to align the last words, every last line should havealign-items: flex-end

Is there a way to select each first and last word of each line to apply these rules and align them? Do you know another way to achieve the same result, perhaps without using flex?

I will attach the code and image to illustrate my desired result.

.hebrew{
    direction:rtl;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 200px;
}
.field {
    display: flex;
    direction: rtl;
    flex-direction: column;
    align-items: center;
    padding: 0 5px;
}
.t1 {  
    font-family: 'David';
    font-weight: bold;
    font-size: 6.5mm; 
}
.t2 { 
    font-size: 3mm;
    direction: ltr;  
}

<div class="hebrew">
<div class="field"><div id="1a" class="t1">אֱלֹהֵינוּ</div><div id="1b" class="t2">nuestro Di-s[Tdp.],</div></div>			
<div class="field"><div id="1a" class="t1">מֶלֶךְ</div><div id="1b" class="t2">Rey de</div></div>			
<div class="field"><div id="1a" class="t1">הָעוֹלָם</div><div id="1b" class="t2">el mundo,</div></div>			
<div class="field"><div id="1a" class="t1">פּוֹקֵחַ</div><div id="1b" class="t2">que abre(los ojos a)</div></div>		  
  
</div>

Run codeHide result

Answer 1

flexbox, t2 t1 - t2 :

width: 0;
min-width: 100%;

:

.hebrew {
  direction: rtl;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 200px;
}
.field {
  display: flex;
  direction: rtl;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;
}
.t1 {
  font-family: 'David';
  font-weight: bold;
  font-size: 6.5mm;
  background-color: bisque;
}
.t2 {
  font-size: 3mm;
  direction: ltr;
  width: 0;
  min-width: 100%;
}

<div class="hebrew">
  <div class="field">
    <div id="1a" class="t1">אֱלֹהֵינוּ</div>
    <div id="1b" class="t2">nuestro Di-s[Tdp.],</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">מֶלֶךְ</div>
    <div id="1b" class="t2">Rey de</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">הָעוֹלָם</div>
    <div id="1b" class="t2">el mundo,</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">פּוֹקֵחַ</div>
    <div id="1b" class="t2">que abre(los ojos a)</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">אֱלֹהֵינוּ</div>
    <div id="1b" class="t2">nuestro Di-s[Tdp.],</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">מֶלֶךְ</div>
    <div id="1b" class="t2">Rey de</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">הָעוֹלָם</div>
    <div id="1b" class="t2">el mundo,</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">פּוֹקֵחַ</div>
    <div id="1b" class="t2">que abre(los ojos a)</div>
  </div>

  <div class="field">
    <div id="1a" class="t1">אֱלֹהֵינוּ</div>
    <div id="1b" class="t2">nuestro Di-s[Tdp.],</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">מֶלֶךְ</div>
    <div id="1b" class="t2">Rey de</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">הָעוֹלָם</div>
    <div id="1b" class="t2">el mundo,</div>
  </div>
  <div class="field">
    <div id="1a" class="t1">פּוֹקֵחַ</div>
    <div id="1b" class="t2">que abre(los ojos a)</div>
  </div>


</div>

Hide result