How can I change my CSS to position and size image correctly on page

I am sure this has been asked multiple times before but it seems every scenario is slightly different. I am using React to position a number of elements on a page. One of these elements is a map which needs to be sized to just under the page width but the CSS does not seem to be containing it correctly.

This is the code visible in debug:

<div id="Layout_Map_Container" class="col-sm-10">
    <div class="col-sm-10" id="Layout_SiteMap_Img" style="z-index: 10;">
        <img src="data:image/jpeg;base64,/9j/4QDORXhpZgAASUkqAAgAAAAGABoBBQABAAAAVg..." alt="Layout plan for X" id="floorMap" style="width: 100%; position: absolute;">

The second div is showing a height of 0px and the image seems to be expanding to full size of the encoded image. The first div acts as if there were nothing in it, but I am assuming that is because of the absolute positioning. What I need is for the <img /> tag to be contained withing the first div and for the entire width to be within the page. Currently the first div has the correct width.

I am sure this will be a very easy fix but my knowledge of CSS is very limited.

Thank you.

EDIT: This is the entire React code used to generate the page. All the additional elements do not seem to play a part in the actual layout as they are not containers for the map.

return (
    <div>
        <Row>
            {(isAdmin && !areMapsLoading) ?
                <span style={{ 'whiteSpace': 'nowrap', 'backgroundColor': '#ccc', 'visibility': `${currentMap !== -1 ? 'visible' : 'hidden'}` }}>
                    <label htmlFor='layoutEditSelect'>Edit</label>&nbsp;
                    <input id='layoutEditSelect' type='checkbox' ref={editRef}
                        onClick={async (e) => { setEditMode(e.target.checked); }}
                    />
                </span>
                : <span></span>
            }
            <Col sm={10}>
                {//(editMode && currentDesk != null) 
                    false ?
                        <div style={{ position: 'absolute', top: '100px', left: '300px' }}>

                            <Row>
                                <Col>Left</Col><Col>{Math.round(currentDesk.x)}</Col>
                                <Col>Height</Col><Col>{currentDesk.height}</Col>
                            </Row>
                            <Row>
                                <Col>Top</Col><Col>{Math.round(currentDesk.y)}</Col>
                                <Col>Width</Col><Col>{currentDesk.width}</Col>
                            </Row>
                            <Row>
                                <Col>Rotation</Col>
                                <Col>{currentDesk.rotation}&deg;</Col>
                            </Row>

                        </div>
                        : ''
                }
            </Col>
        </Row>
        <Row>
            <Col sm={1}>
                <Row>
                    <Col>
                        {!areMapsLoading ? (
                            buildMapSelector()
                        ) : (
                            <Loading title="Map Data" />
                        )}
                    </Col>
                    <Col>
                        {
                            editMode && mapScale.height ? (<AddDesks
                                maps={maps}
                                deskTypes={deskTypes}
                                desks={desks}
                                editMode={editMode}
                                scale={mapScale}
                                currentMap={currentMap}
                                fns={AddDesksFns}
                                
                            />
                            )
                                : ''
                        }
                    </Col>
                </Row>
            </Col>
            <Col sm={10} id="Layout_Map_Container" ref={mapContainer}>
                <div
                    ref={mapContainer}
                    style={{
                        width: "100%",
                        height: `${window.height}px`,
                        position: "absolute",
                        zIndex:10
                    }}
                    onClick={() => clickMap()}
                    onLoad={
                        () => {
                            //console.log("load");
                            getScale();
                            clickMap();
                        } /*If map is reset, set current desk to null*/
                    }
                    className="map"
                    id="Layout_SiteMap_Img"
                >
                    <img
                        src={mapImage}
                        style={{ width: "100%", position: "absolute" }}
                        alt={`Layout plan for ${maps.maps[currentMap]?.currentSite?.SiteName}`}
                        ref={mapRef}
                        id="floorMap"
                        onLoad={getScale}
                    />
                    <React.Fragment>{buildDesks()}</React.Fragment>
                </div>
            </Col>
        </Row>
        {showStatus(currentDesk)}
    </div>
);