Footer image not on the same Line with Footer Text - css

Question

I want the image / logo on the footer to be on the same line as the text on the footer, but whatever I do,it goes below the Line and looks like this
My css code is looking like this
.header{
background-color: #007FC0;
width: 100%;
padding: 25px 0;
}
.container{
flex : 1 1 auto;
color:white;
}
.needhelpText{
text-align: right;
font-weight: bold;
color: white;
display: inline-block;
padding: 10px;
float: right;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: medium;
}
.copyrightText{
margin: 8px;
color: white;
font-size: 13px;
}
.footerLinks{
color: white;
display: inline-block;
font-size: 13px;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footerLogo{
float: right;
width : 134px;
height: 40px;
padding: 10px;
align-items: center;
display: inline-block;
}
.footer{
position: fixed;
left: 0;
padding: 10px;
bottom: 0;
width: 100%;
height: 70px;
background-color: #16192C;
}
My React Code looks like this
import React from 'react';
import './app-styles.css';
import Vector from './Vector.png'
import ie_logo from './ie_logo.png';
import {Link} from 'react-router-dom';
function HomePage() {
return (
<div className="App">
<header className="header">
<img src={Vector} style={{margin:7, flexDirection:'column', alignItems: 'center'}} alt="Vector" />
<img src={ie_logo} style={{margin:7, flexDirection: 'row', width:114, height:25}} alt="ie_logo" />
<p className="needhelpText">LOGIN HERE?</p>
</header>
<form>
<label>
Hello React Label
</label>
</form>
<footer className="footer">
Privacy Policy |
Do Not Sell My Personal Information |
Advertising Guidelines |
Site Map
<div className="copyrightText">
© Copyright 2021 | Luther Corp | All Rights Reserved
</div>
<img src={ie_logo} style={{margin:9}} className="footerLogo" alt="ie_logo" />
</footer>
</div>
);
}
export default HomePage;
The Css holding this is the footer Logo which is this one
.footerLogo{
float: right;
width : 134px;
height: 40px;
padding: 10px;
align-items: center;
display: inline-block;
}
Pls what am I missing? Is there something I missed?

Answer 1

Have you tried out giving your footer a 100% width attribute? And if so, please also check the width of the logo. Incase that doesn't work out you can always create a div with 100% width containing only the logo. Than give that dive a text-align:right; attribute.

Answer 2

It's hard to see what's going on without a logo, but I think the footerLogo css height and inline-block are clashing.
If you want to have all the child elements in the same line whilst keeping their height the same (and therefore centered), use a display: flex on the parent without flex wrap. You can then use css margin-left: auto on the logo to make it float to the right and whatever height you want.
PS: align-items property does not work unless the container is display:flex. And it's confusing to add style when there's a class (unless the style is dynamically determined).