Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute' positioning for this, but it did not solve the issue. I am utilizing ReactJS to showcase the Widget on the right:
<div className="widget">
<div className="row">
<div className="col-lg-12 title">{title}</div>
</div>
<div className="row widgettop">
<div className="col-lg-6 topicon">
<img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
</div>
<div className="col-lg-6 topdegrees">
{location}
<div className='degrees'>{degrees}°</div>
{wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
</div>
</div>
</div>
Based on the state.wind, I determine whether to display the wind details or not. How can I maintain the image's position when the wind text/other content is removed or altered?