Ended up positioning the elements over each other, the text file was a random file I selected from google. You will have to track the clicks but the hard part is done an the code could be a little cleaner but it answers your problem I hope.
Answer requires jQuery
Live demo: http://jsfiddle.net/3aQC4/1/
<html><head>
<style>
#con, .line{
display:block;
position:absolute;
top:0;
left:0;
height:300px;
width:600px;
border:1px solid black;
z-index:10;
background-color:transparent;
}
.line{
border:none;
border-right:1px solid black;
z-index:5;
}
iframe {
position:absolute;
top:0;
left:0;
z-index:1;
height:300px;
width:600px;
}
</style>
</head>
<body>
<div id="con"></div>
<iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>
<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>
</body>
</html>