如何制作一个看起来像这个样机的页面？

Question

下面是我的模型和我尝试实现它的图像。有很多问题。

• 标题未居中
• 我不知道如何将Button1放在右上方对齐文本的左侧
• 是否有更好的方法将左上角文字放在图像右侧，而不仅仅是根据图像尺寸对边距进行硬编码？
• 我也不知道如何放置文本区域以使其填充div的中间位置，并根据需要对齐。

当我试图在这里发布我的html和css时，所有标签都被删除了。以下是我的代码图片。

.outer_border {
    	border: 1px solid black;
    	width: 600px;
    	height: 500px;
    	position: relative;
    }
    
    .inner_border {
    	border: 3px solid black;
    	width: 400px;
    	height: 300px;
    	top: 10px;
    	right: 10px;
    	position: absolute;
    }
    
    .image {
    	border: 1px solid black;
    	width: 50px;
    	height: 50px;
    	top: 5px;
    	left: 5px;
    	position: absolute;
    }
    
    .upper_left_text {
    	top: 5px;
    	/*is this a smart way to position to the right of the image?*/
    	left: 60px;
    	position: absolute;
    }
    
    .the_header {
    	top: 5px;
    	text-align: center;
    	position: absolute;
    }
    
    .button1 {
    	top: 5px;
    	right: 50px;
    	position: absolute;
    }
    
    .button2 {
    	bottom: 5px;
    	right: 5px;
    	width: 80px;
    	height: 60px;
    	position: absolute;
    }
    
    .text_area {
    	/*I have no idea how to position this*/
    }
    .upper_right_text {
    	top: 5px;
    	/*is this a smart way to position to the right of the image?*/
    	right: 5px;
    	position: absolute;
    }

<div class="outer_border">
    			<div class="inner_border">
    				<!--just use a div to represent the image -->
    				<div class ="image">
    				</div>
    				<span class="upper_left_text">
    					some text
    				</span>
    				<!-- this isn't centered? -->
    				<h2 class="the_header">
    					Header
    				</h2>
    				<!-- how do I place this to the left of the text? -->
    				<button class="button1">Button</button>
    				<span class="upper_right_text">
    					some text
    				</span>
    				<button class="button2">Button 2</button>
    				<textarea class="text_area">Text Area</textarea>
    			</div>
    		</div>