Editing HTML file in Dreamweaver....

It's unclear what this will be used for. 

If you want an actual flowchart, you might have better success with something like LucidChart.  They offer 100 templates for every possible discipline with free and tiered pricing plan options.

https://www.lucidchart.com/pages/landing/flowchart-software

https://www.lucidchart.com/pages/templates/flowchart

See code below, works on mobile devices too!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Boxes</title>
</head>
<style>
body {
font-family: helvetica, sans-serif;
}
.textBoxesWrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 30px;
width: 80%;
margin:	0 auto;
border-top: 10px solid #ed1d00;
}
@media screen and (max-width: 768px)	{
.textBoxesWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 520px)	{
.textBoxesWrapper {
grid-template-columns: 1fr;
}
}
.textBoxGroup {
display: flex;
flex-direction: column;
}
.textBox {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #3778fa;
padding: 20px;
flex: 1;
border-radius: 4px;;
}
.textBox h3 {
margin:	0 0 5px 0;
padding: 0;
text-align: center;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.textBox h4 {
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
font-weight: 600;
color: #fff;
}
.vertLine {
height:	70px;
width: 10px;
margin:	0 auto;
background-color: #ed1d00;
}
</style>
<body>
<div class="textBoxesWrapper">


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->



<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->



<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


<div class="textBoxGroup">
<div class="vertLine"></div>
<div class="textBox">
<h3>Gustavo Aragon</h3>
<h4>Production Control Manager</h4>
</div>
</div>
<!-- end textBoxGroup -->


</div>
<!--end textBoxesWrapper-->
</body>
</html>

Use a vector graphics editor like Illustrator or Inkscape and export to SVG code.   Or use an SVG Generator.

https://www.smashingmagazine.com/2021/03/svg-generators/

Scalable Vector Graphics are math-based images that can be scaled up or down without any loss in quality.  SVG is perfect for flow charts, infographics, text and other non-photographic web images.  The code can be further edited in Dreamweaver to add custom animation and interactive functionality.

Hope that helps.

two points

• the code and the screen shot doesn't fit the same region
• the templating model doesn't seams to belong to DW

could you be more specific of give the appropriate veiw and code part