Image being pushed off of viewport by HTML Form inside flex container-CodePudding

I have a bunch of text and an image. The text is in a h2. The text I have aligned left, and the image I have aligned right on the same line using a flex container.

The alignment is perfect until I add the form in. I'm using a form with formaction as the button goes to an external site.

The form pushes the image out of view from the viewport. I have tried adding an inline-block class to the form but I am unable to solve this.

I am using EJS so below is the snippet I am rendering

body {
  font-family: 'Raleway', sans-serif;
  color: white;
  background: linear-gradient(to left, #6ca4a1 35vw, #1d7874 0);
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  position: sticky;
  background-size: cover;
  height: 100%;
  max-width: 100vw;
}

.display-flex {
  height: 100%;
  display: flex;
  min-height: 0;
}

.display-flex>div {
  margin: auto;
}

.padding-top {
  padding-top: 7vh;
}

.inline-block {
  display: inline-block;
}

<div >
  <div>
    <h2>Psychology <br> Services </h2>
    <h2>Tim Carey</h2>
    <h2>Earlwood <br> NSW</h2>
    <form >
      <button  formaction="https://www.halaxy.com/book/tim-carey/location/443171/select-time">Book
                                a
                                session</button>
    </form>
  </div>
  <div>
    <img src="/images/tim-compressed.png" alt="photo of psychologist" id="tim">
  </div>
</div>

CodePudding user response：

try to use the code i have made, does it match what you expect?

    body {
  font-family: 'Raleway', sans-serif;
  color: white;
  background: linear-gradient(to left, #6ca4a1 35vw, #1d7874 0);
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  position: sticky;
  background-size: cover;
  height: 100%;
  max-width: 100vw;
}

.display-flex {
  height: 100%;
  display: flex;
  min-height: 0; 
  flex-wrap: wrap;
}

.left-side{
  flex-basis : 65%;
}
.right-side{
  flex-basis : 35%;
  display : flex;
  flex-direction : column;
}

.padding-top {
  padding-top: 7vh;
}
.inline-block {
  display: inline-block;
}

img{
width : 100%
}

                <div >
                <div >
                    <h2>Psychology <br> Services </h2>
                    <h2>Tim Carey</h2>
                    <h2>Earlwood <br> NSW</h2>
                    <form >
                        <button 
                            formaction="https://www.halaxy.com/book/tim-carey/location/443171/select-time">Book
                            a
                            session</button>
                    </form>
                </div>
                <div >
                    <img src="https://images.unsplash.com/photo-1661956602153-23384936a1d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="photo of psychologist" id="tim">
                </div>      
            </div>

CodePudding user response：

you can remove margin:auto;, and add justify-content: space-between in the wrapper that wraps the element

body {
  font-family: 'Raleway', sans-serif;
  color: white;
  background: linear-gradient(to left, #6ca4a1 35vw, #1d7874 0);
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  position: sticky;
  background-size: cover;
  height: 100%;
  max-width: 100vw;
}

.display-flex {
  height: 100%;
  display: flex;
  min-height: 0;
  justify-content: space-between;
}

/* .display-flex > div {
  margin: auto;
} */

.padding-top {
  padding-top: 7vh;
}

.inline-block {
  display: inline-block;
}

<div >
  <div>
    <h2>Psychology <br> Services </h2>
    <h2>Tim Carey</h2>
    <h2>Earlwood <br> NSW</h2>
    <form >
      <button  formaction="https://www.halaxy.com/book/tim-carey/location/443171/select-time">Book
                                a
                                session</button>
    </form>
  </div>
  <div>
    <img src="/images/tim-compressed.png" alt="photo of psychologist" id="tim">
  </div>
</div>