.hag-wrapper{

display:flex;
gap:30px;
align-items:flex-start;
margin:40px auto;
max-width:1400px;

}

.hag-left{

width:40%;
background:#fff;
padding:25px;
border:1px solid #ddd;
border-radius:10px;

}

.hag-right{

width:60%;
background:#fff;
padding:25px;
border:1px solid #ddd;
border-radius:10px;
min-height:800px;

}

.hag-group{

margin-bottom:18px;

}

.hag-group label{

display:block;
font-weight:bold;
margin-bottom:6px;

}

.hag-group input,
.hag-group select{

width:100%;
padding:10px;
font-size:16px;

}

button{

padding:12px 25px;
font-size:17px;
cursor:pointer;

}

#previewBox{

padding:20px;
background:#fafafa;
min-height:700px;

}

@media(max-width:900px){

.hag-wrapper{

display:block;

}

.hag-left,
.hag-right{

width:100%;
margin-bottom:30px;

}

}

#previewBox pre{

white-space:pre-wrap;
font-size:20px;
line-height:2;

}