Div ans untere Ende eines Elementes festmachen

Hallo,

ich bin neu hier in diesem Forum. Auf der Suche nach einer Lösung für mein Darstellungsproblem hab ich euch hier gefunden. Und ich hätte auch gleich eine Bitte.

Ich würde gerne ein div am unteren Ende eines Elements kleben lassen. Ich habe schon sehr viel versucht, bin letztendlich bei Flexbox hängen geblieben, doch auch damit komme ich leider nicht zum Ziel.
Die Webseite habe ich mit Bootstrap erstellt (ich habe nur die Navigation, Grid, Formulare und Tabellen genommen). Zur Veranschaulichung habe ich den Code nachgebaut und auf JSFiddle hochgeladen. Der Link:
https://jsfiddle.net/cky9hcx8/25/

Es geht um die Box mit dem grauen Rand ("Quelle", ...) Ich hätte es gerne, dass der untere Rand dieser Box auf gleicher Höhe wie das Beispielbild links daneben abschließt. Der Inhalt des Textes ist aber immer verschieden lang und ich möchte dass das ganze auch auf Smartphones gut aussieht. Ich nehme an, aus diesem Grund fällt position absolute raus.

Ich hoffe ich konnte mein Problem verständlich schildern und würde mich freuen wenn mir jemand bei diesem Problem weiterhelfen kann.

Viele Grüße
Larissa

Hallo, danke für die Hilfe, deine Lösung kommt schon ziemlich nahe an meine Wunschvorstellung. Ich denke damit sollte ich zum Ziel kommen.
Es tut mir leid das ich mein Problem nicht gut beschrieben habe. Ich hab auch eben gesehen, das mein fiddle das Problem nur anzeigt wenn das Fenster groß genug ist.

Puh, das ist schwieriger als ich angenommen hatte. Wegen Bootstrap, ja ich hab auch schon befürchtet das es keine gute Entscheidung war, diese Webseite damit zu machen. Und nachdem auch Sailor und jetzt du mir sagen, das der html Aufbau nicht so ideal ist, ist, vielleicht ist es wirklich besser, nochmal von vorne anzufangen Aber besser jetzt als später.

Auf jeden Fall auch dir vielen Dank dafür das du mir extra ein Beispiel mit Erklärungen gemacht hast. Beim Öffnen deiner Beispielseite war mein erster Gedanke: Ja, genau so

Hi, hier bin ich wieder.

Ich habe jetzt einiges über Flexbox gelesen und versuche nun, mein Beispiel von oben nochmal neu umzusetzen, so das ich auch verstehe was ich da mache.

Bootstrap hab ich rausgeworfen, einiges habe ich auch schon so wie ich möchte. Allerdings hänge ich an einer Sache fest.

Der Container <div class="source-box"> (ich habe ihn grün umrandet) soll sich über die ganze Breite der rechten Box erstrecken.

Könnt ihr mir bitte nochmal weiterhelfen, damit ich das auch noch richtig hinbekomme?

Ich hab nochmal ein JSFiddle erstellt, wenns euch lieber ist, kann ich den Code aber auch gerne hier einfügen. Am besten sieht man was ich meine, wenn das Fenster etwas größer ist.
https://jsfiddle.net/z88obqtt/

Danke schonmal an alle Helfer und Leser

Ich habs geschafft, ist wahrscheinlich nicht die eleganteste Lösung, aber funktioniert und anders bekomm ich es noch nicht hin.
Sollte das irgendwann mal jemand brauchen, hier der Code:

<div class="page">
  <h4> Seiteninhalt</h4>
    <div class="content">
        <div class=" box left-box">
          <h4>left-box</h4>
            <img src="http://via.placeholder.com/150x150">
            <img src="http://via.placeholder.com/150x150">
        </div>
        <div class="box right-box">
          <div><h4>right-box</h4></div>
            <div class="source-box">
                <div class="source-box-text">
                    source-box-text
                    <br> Textzeile
                    <br> Link
                    <br> Datum
                </div>
                <div class="source-box-logo">
                    <img src="http://via.placeholder.com/70x70">
                </div>
            </div>
        </div>
    </div>
</div>

*{
  box-sizing: border-box;
  background: rgba(100, 150,214, 0.8);
}
h4 {
  text-align: center;
}
.content {
  display: flex;
  flex-wrap: wrap;
}
.box {
  display: flex;
  flex: 1 1 1px;
  border: 1px solid blue;
}
.left-box {
  flex-direction: column;
  align-items: center;
}
.right-box div {
  border: 1px solid red;
}
.right-box{
  display: flex;
  flex-direction: column;
}
.source-box {
  border: 2px solid green;
  margin-top: auto;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
}