Is there any way to simulate the developer Elements picker with html source and an iframe?

For example, the code in the left panel is the html source of a website that is created from the website and can be used as the source in an iframe to render the website.

I would like to be able to connect the two and hover over lines in the left panel and show the corresponding element in the right panel and vice versa where I could select an element and the corresponding line in the code highlights.

Currently I am using this to render these two panels:

  <Grid item xs={6}>
    <Item>{websiteData.length > 0 &&
<TextareaAutosize
maxRows={30}
value={websiteData}
style={{ width: "100%" }}
/>
}</Item>
  </Grid>
  <Grid item xs={6}  className={classes.test}>
    <Item>{websiteData.length > 0 &&
<iframe srcdoc={websiteData} title="Website Preview" className={classes.frame}></iframe>}</Item>
  </Grid>

Any ideas? I don't know if there are any existing solutions out there, I am using react-js